Vue自定义表单内容检查rules
Vue自定义表单内容检查rules先看个例子效果错误时的效果正确时的效果组件 <el-form-item label="手机号:" prop="phone_number"><el-input v-model="formPerson.phone_number"></el-
·
Vue自定义表单内容检查rules
先看个例子
- 效果
- 错误时的效果
- 正确时的效果
- 错误时的效果
- 组件
<el-form-item label="手机号:" prop="phone_number"> <el-input v-model="formPerson.phone_number"></el-input> </el-form-item>
-
script中
export default { data() { var validateMobilePhone = (rule, value, callback) => { if (value === '') { callback(new Error('负责人手机号不可为空')); } else { if (value !== '') { var reg = /^1[3456789]\d{9}$/; if (!reg.test(value)) { callback(new Error('请输入有效的手机号码')); } else { callback(); } } } }; return{ formPerson: { phone_number: '', }, rules: { phone_number: [ {validator: validateMobilePhone, trigger: 'blur'} ] }, } } }
遇到的坑
- 在组件中【开始写的时候prop自定的名字】
<el-form-item label="手机号:" prop="phone"> <el-input v-model="formPerson.phone_number"></el-input> </el-form-item>
- rules中
rules: { phone: [ {validator: validateMobilePhone, trigger: 'blur'} ] }
- 碰到的坑
- 当输入正确的手机号时,显示为错误,发现value并没有传过来,为undefined
- 解决:prop写成和数据中的参数的名称一样,即phone_number
- 当输入正确的手机号时,显示为错误,发现value并没有传过来,为undefined
更多推荐
已为社区贡献17条内容
所有评论(0)