elementui from表单提交_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'z'))&&

((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'z'))&&

((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: {

},

})