vee-validate3+vue+rules实现一个表单输入验证效果代码-html代码-BFW代码库

vee-validate3+vue+rules实现一个表单输入验证效果代码

代码语言：html

所属分类：验证

代码描述：vee-validate3+vue+rules实现一个表单输入验证效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



</head>

<body>
    <div id="vueApp">
        <validation-observer v-slot="props" ref="validForm">
            <validation-provider v-slot="props" rules="required|confirm:myid">
                NAME:<input type="text" v-model="myname">
                <span>{{ props.errors[0] }}</span>
            </validation-provider>

            <textbox v-model="myid" name="myid" rules="required" title="myid"></textbox>
            <span class="valid-error">{{ props.errors[0] }}</span>

            <validation-provider v-slot="props" name="testage">
                <textbox-novalid v-model="age" name="myage" rules="required" :readonly="isReadonly"></textbox-novalid>
            </validation-provider>
        </validation-observer>
    </div>

    <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/vee-validate.3.2.5.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/rules.umd.min.js"></script>
    <script>
        Vue.component("validation-provider", VeeValidate.ValidationProvider);
        Vue.component("validation-observer", VeeValidate.ValidationObserver);
        
        Vue.component("textbox", {
          props: {
            name: {
              type: String,
              default: "" },
        
            title: {
              type: String,
              default: "" },
        
            value: String | Number | Boolean,
            readonly: {
              type: Boolean,
              default: false },
        
            cssStyle: {
              type: String,
              default: "" },
        
            setUppercase: {
              ty.........完整代码请登录后点击上方下载按钮下载查看