vue自定义component组件实现表单输入验证效果代码-html代码-BFW代码库

vue自定义component组件实现表单输入验证效果代码

代码语言：html

所属分类：验证

代码描述：vue自定义component组件实现表单输入验证效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
</head>

<body>
    <div class="content" id="app" style="margin:100px;">
        {{version}}
        <ab-form></ab-form>
    </div>
    <script type="text/x-template" id="ab-form">
        <form method="post" action="#" id="form1" class="ab_form" @submit="checkForm">
            <ab-form-item :tip="nameTip">
                <p>
                    <label for="name">Name: </label>
                    <input type="text" v-model="name" id="name" name="name" @change="checkFormItem('name')">
                </p>
            </ab-form-item>
            <ab-form-item :tip="ageTip">
                <p>
                    <label for="age">Age: </label>
                    <input type="number" v-model="age" name="age" id="age" min="0" @blur="checkFormItem('age')">
                </p>
            </ab-form-item>

            <button>Submit</button>
        </form>
    </script>
    <script type="text/x-template" id="ab-form-item">
        <div class="form-item">
            <slot></slot>
            <p class="tip" v-if="tip">{{ tip }}</p>
        </div>
    </script>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash-min.js"></script>
    <script>
        Vue.component('ab-form-item', {
          template: `#ab-form-item`,
     .........完整代码请登录后点击上方下载按钮下载查看