标签：reg 验证 直接 NPU sub cal def 方法 写法
一、简单的逻辑验证使用方法：
方法步骤：
1、在html中给el-form增加 :rules="rules"
2、html中在el-form-item 中增加属性 prop="名称"
3、js中直接在data中定义rules:{}
在html中的写法：
<el-form ref="formData" :rules="rules" :model="formData" label-width="500px"> <el-form-item label="用户名：" prop="userName"> <el-input class="inp" v-model="form.userName" auto-complete="on"></el-input> <el-button type="primary" class="btn-add" @click="onSubmit(‘formData‘)">提交</el-button> </el-form-item> </el-form>
js中：
<script> export default { data() { return { formData: { userName: ‘‘, }, // 校验规则 rules: { userName: [ { required: true, //是否必填 message: ‘用户名不能为空‘, //规则提示 trigger: ‘blur‘ //何事件触发 }, //可以设置多重验证标准 { min: 3, max: 5, message: ‘长度在 3 到 5 个字符‘ }, { pattern: /^[\u4E00-\u9FA5]+$/, //正则 message: ‘用户名只能为中文‘ } ] } } } } </script>
二、自定义验证逻辑：
步骤：
1、在js中找到data中的rules，然后在对应的名称中设置 validator: 验证器名称；
2、在js的data中的return之上书写验证器对应的js验证逻辑，如：
<script> export default { data() { // 此处自定义校验手机号码js逻辑 var userNameReg = /^[\u4E00-\u9FA5]+$/ var validateuserName = (rule, value, callback) => { if (!value) { return callback(new Error(‘用户名不能为空!!‘)) } setTimeout(() => { if (!userNameReg.test(value)) { callback(new Error(‘用户名只能为中文‘)) } else { callback() } }, 1000) } return { formData: { userName: ‘‘, }, // 校验规则 rules: { // 校验用户名，主要通过validator来指定验证器名称 userName: [{ required: true, trigger: ‘blur‘, validator: validateuserName}] }, } } } </script>
三、表单提交
methods: { onSubmit(formName) { this.$refs[formName].validate(valid => { if (valid) { //如果通过验证 to do... } else { console.log(‘error submit!!‘) return false } }) }
标签：reg 验证 直接 NPU sub cal def 方法 写法
原文地址：https://www.cnblogs.com/lguow/p/12163323.html
