vue表单验证的完整步骤

2019独角兽企业重金招聘Python工程师标准>>>...

weixin_34289454

3062人浏览 · 2018-11-10 22:42:00

weixin_34289454 · 2018-11-10 22:42:00 发布

2019独角兽企业重金招聘Python工程师标准>>>

1、首先在el-form标签加上ref和:rules属性，并且在每个el-form-item标签里定义prop属性，prop属性跟:rules里面的每项对应，如：

<el-form :model = " dialogFormData " label-width = "150px" ref = "dialogFormRef" :rules = " dialogFormRules " >

<el-form-item label = "uniqueID" prop = "uniqueID" >

<el-input v-model = " dialogFormData.uniqueID " placeholder = "" ></el-input>

</el-form-item>

</el-form>

2、在data里面定义rules属性值

dialogFormRules: {

uniqueID: [{required: true , message: '必填' }, {validator: MyValid.validSixNum}]

}

3、验证表单

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

在这里判断valid的true或false

}

4、自定义验证方法的例子：

//验证长度为6的全数字

validSixNum (rule, value, callback){

var valArr = value.split( '' );

console.log( 'vali six num: ' + valArr.length);

if(valArr.length != 6){

return callback(new Error('长度必须是6'));

}

var re = new RegExp( "^{6}[0-9]*$" );

if ( ! re.test(value)){

return callback( new Error( '必须是纯数字' ));

}

callback();

}

转载于:https://my.oschina.net/u/222749/blog/2874531

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^