vue+element-ui el-form表单验证及提交验证

单项验证

html

v-if是画面显示判定直接无视，主要需要在要做验证的文本框上加标签，然后需要加上 :prop 和 :rules两个属性。各属性名关系如图所示，标签最外层，中层，最内层。

的:model一定要加。

js

直接在new Vue的data:{}里边，加一个rules: {}，然后在内部加如下代码

project_name: [{required: true,message:'必须输入'},{min:0,max:50,message:'输入内容在50字以内'}],

图示为自带的验证规则，也可以自己定义验证规则。如下

{validator: function(rule,value,callback){
    			        	 for(i=0;i'Z'))&&
    			        			((data<'a') || (data>'z'))&&
    			        			((data<'0') || (data>'9'))){
    			        			return callback(new Error('请输入半角英数字'));
    			        		 }
    			        	 }
    			         }, trigger: 'blur'}

如图为自定义验证规则，整段代码是在一个大括号内部 就是上上图中方括号内的大括号。callback()一定要有。

表单提交验证

html

提交

如图 @click后的projectUpdate()为提交表单的方法。方法的参数 'masterManageForm' 为标签的:model属性，注意前后加单引号。

js

    	// 按下登录按钮
    	projectUpdate : function(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //通过验证
                } else {
                    //未通过验证
                    return false;
                }
              });
    	},

若未通过验证，所有设置过单项验证的项目都会自动弹出错误。

提示

1,如果在表单提交的时候，无论如何 都 进不去 如下方法的话

 this.$refs[formName].validate((valid) => {

}

那么检查一下 所有的自定义验证规则 是否所有的函数都添加了callback()回调函数，包括if的方法体内和方法体外等等任何地方。

2,可能会有多个自定义验证 方法内容相同，这时候可以在new Vue之外写一个方法，然后在rules里的具体位置调用。如下所示

var halfAngleCheck = (rule, value, callback) => {
    for(i=0;i'Z'))&&
           ((data<'a') || (data>'z'))&&
           ((data<'0') || (data>'9'))){
           return callback(new Error('请输入半角英文或数字'));
        }
        return callback();
    }
    return callback();
};
var masterManage = new Vue({
    el: "#app",
    data: {
        // 验证
        rules: {
            project_id: [{required: true,message:'项目ID不可为空！'},{validator: halfAngleCheck, trigger: 'blur'}],
            project_name: [{required: true,message:'项目名不可为空！'},{validator: halfAngleCheck, trigger: 'blur'}],
        },
    },
    created: function(){

    },
    methods: {
        
    },
})