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: {
              type: Boolean,
              default: false } },
        
        
          computed: {
            validationTitle: function () {
              if (this.title == "") {
                console.log("validationTitle:", this.$parent.$options.propsData.title);
                return this.$parent.$options.propsData.title;
              } else {
                return this.title;
              }
            } },
        
          methods: {
            onInput: function (ev) {
              var val = ev.target.value;
              if (this.setUppercase) {
                val = val.toUpperCase();
              }
              this.$emit("input", val);
            } },
        
          template: `<div>
                    <validation-provider v-if="readonly" v-bind="$attrs" :name="validationTitle" v-slot="props" >
                        <span  :style="cssStyle" v-bind="$attrs">{{value}}</span>         
                    </validation-provider>
                    <validation-provider v-if="!readonly".........完整代码请登录后点击上方下载按钮下载查看