ElementUI表单验证使用

1、设计校验方式：

　　我们表单验证的rules一般封装一个单独的js文件，比如我之前写的这个博客：

　　ElementUI使用问题记录：设置路由+iconfont图标+自定义表单验证

 　　可以修改下：公共的校验写在公共里面，个性化的校验写在methods里面

　　:rules="[rules.password,{validator:valPwd,trigger:'blur'}]"

 

//先导入公共验证文件
import {validator,getVeriCode} from '@/utils'
//data里面
data(){
    return {rules:validator}
}
//在methods里面定义新的验证函数valPwd
methods:{
    valPwd(rule, value, callback) {            
        if (!value) {
            callback(new Error('请再次输入密码'));
        } else if (value !== this.resetPassword.password) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
      }
}
//template里面绑定验证规则
<el-form-item prop="repeatPassword" :rules="[rules.password,{validator:valPwd,trigger:'blur'}]">
    <el-input type="password" v-model="resetPassword.repeatPassword" placeholder="重复密码"></el-input>
</el-form-item>

2、同时校验多个表单

　　在保存某个页面时，让页面中的两个form都通过校验才能保存，方法其实挺多的，主要是看下这个Promise的写法

var p1=new Promise(function(resolve, reject) {
    this.$refs[form1].validate((valid) => {
        if（valid）{
            resolve();
        }
    })
});
var p2=new Promise(function(resolve, reject) {
    this.$refs[form2].validate((valid) => {
        if（valid）{
            resolve();
        }
    })
});

Promise.all([p2,p1]).then(function(){
    alert("验证通过了");
});

3、只验证表单里面部分内容：比如我们需要获取验证码的时候，就只需要验证表单里面的手机号就行了

getCode(){
    this.$refs['resetPassword'].validateField('phone',(validMessage)=>{
        if(validMessage != ""){
            return false;
        }
        this.codeDisabled = true;
        let countTime = setInterval(() => {
            --this.countdown;
            if(this.countdown == 0){
                clearTimeOut(countTime);
                this.countdown = 60;
                this.codeDisabled = false;
                return;
            }
        },1000);
    })
}

　　看文档里面都有的

　　我们也可以封装一下

//获取验证码
export const getVeriCode = (vueInstance,formName,phone) => {
    vueInstance.$refs[formName].validateField('phone',(validMessage)=>{
        if(validMessage != ""){
            return false;
        }

        getVeriCodeApi(phone).then((res) =>{
            if(res.status === 200){
                vueInstance.$message({
                    message:'验证码已发送，请注意查收。',
                    type:'success'
                })
            }
        })

        vueInstance.codeDisabled = true;
        let countTime = setInterval(() => {
            --vueInstance.countdown;
            if(vueInstance.countdown == 0){
                clearInterval(countTime);
                vueInstance.countdown = 60;
                vueInstance.codeDisabled = false;
                return;
            }
        },1000);
    })
}
//调用
getCode(){
    getVeriCode(this,'login_code',this.login_code.phone)
},