http://element.eleme.io/#/zh-CN/component/form里给出了一个form验证的例子,但是都是使用el-form带有的验证规则,怎么使用自己定义的规则进行验证呢?:
.vue的html不变,只是在.ts中的验证中添加自己定义的规则,比如
.vue中
<el-form ref="newUser" :model="newUser" :rules="newUserRule" class="login-container"> <el-row> <el-col :span="10"> <el-form-item prop="userId"> <el-input v-model="newUser.userId" placeholder="请输入sso用户名字"> <template slot="append">@gridsum.com</template> </el-input> </el-form-item> </el-col> <el-col :span="3" :offset="1"> <el-select v-model="newUser.roleType"> <el-option :value="0" :label="roleText[0]"></el-option> <el-option :value="1" :label="roleText[1]"></el-option> </el-select> </el-col> <el-col :span="2" :offset="1"> <el-button type="primary" @click="addUser()">添 加</el-button> </el-col> </el-row> </el-form>
注意:
1. el-form-item的 prop="userId"跟el-input的v-model="newUser.userId"要对应
2. prop一定要写在el-form-item上
3. :rules一定要写在el-form上
.ts中
newUserRule = { userId: [ { required: true, message: '请输入账号', trigger: 'blur' }, { validator: (rule, value, callback) => { if (/^[a-zA-Z]{4,20}$/.test(value) == false) { callback(new Error("用户名由4-20位字母组成")); } else { callback(); } }, trigger: 'blur' //这里还有blur触发方法; 如果设为none,那么只有this.$refs[formName]['validate']时才会验证
} ] };
提交表单时,先进性验证是否通过,再进行其他操作,具体实现,给出的链接里面有,但是使用ts的话如果没有声明文件,会提示validate等方法不存在,可以自己去声明,或者换种思路解决:
addUser() { /* this.$refs[formName]['validate']((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); */ if (this.newUser.userId == '') { this.$message.error('用户名不能为空!'); } else if(/^[a-zA-Z]{4,20}$/.test(this.newUser.userId) == false) { this.$message.error('用户名不正确!'); } else { //此处可以进行后台提交 } }
所有评论(0)