2020-01-07

vue中使用elementui的时候，进行自定义的表单校验的时候。出现，一进入页面，没有对输入框进行任何操作的时候，就触发了表单校验规则。

如图:

方法就是在初次渲染页面的时候往本地存储存一个值，然后在自定义校验规则中加入，对该值的判断。如果不等于该值的话，整个

    if (value ===''&& localStorage.getItem('name')!=='value') { //读取本地存储的值，进行判断

         callback (new Error('请填写企业微信账号'));

        }

判断就是false，初次进行页面就不会执行该部分代码了。

然后就是：

在输入框中的值进行改变的时候，改变这个判断。让它正常进行显示校验规则。

方法就是：

因为发现刚 进行页面的时候，该输入框会聚焦。后期进行输入框输入值的时候，校验规则是离焦触发的，所以这里给其帮定一个聚集事件，当每次聚焦后，改变本地存储的值。打破原来的判断，进行正常的校验，离焦就会正常的触发，表单校验规则。

结构：

             

 

js代码代码如下：把自定义的规则写在了，计算属性中。

computed: {

    //验证规则，当编辑功能为false时，不显示验证的'*'

    rules() { // 参照element-ui的写法

      //  自定义校验规则

    var validate = (rule, value, callback)=> {

        if (value ===''&& localStorage.getItem('name')!=='value') { //读取本地存储的值，进行判断

         callback (new Error('请填写企业微信账号'));

        } else {

          if (this.formData.companyWechatAccount!==value ) {

            callback (new Error('两次输入密码不一致'));

          } else {

            callback ();

          }

        }

    };// 注意这里是分号，代码这是个函数，结束了。然后在后面写其自定义的规则。

    // 触发--->自定义的规则

        qujingCompanyWechatAccount:[

          {

            validator:validate:'',trigger:'blur' //编辑状态下才开启表单验证功能

          }

        ],

// 聚焦事件函数

methods: {

change () {

    console.log('它聚焦了数据了')

    localStorage.setItem('name','value222') // 随便改变其值，只要大破原来的if判断条件即可。

    },

}