element表单校验不进入 validate 问题

element UI 自定义校验 不进入 validate 问题

console.log 表单的 $refs 可以看到 validate 方法 但是不执行,很奇怪,所以答案就是 自定义的时候如果完成校验 或者 不进校验 需要写上 callback()

  1. 错误代码
var notZero = (rule, value, callback) => {
	if (!value) {
		return callback(new Error('值必须是大于0'));
	}
};
  1. 修改后代码
var notZero = (rule, value, callback) => {
	if (!value) {
		return callback(new Error('值必须是大于0'));
	} else {
       callback()
    }
};
  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于element-ui表单校验,你可以通过以下步骤来实现: 1. 在表单中使用`<el-form>`标签包裹需要校验表单元素。 2. 为每个需要校验表单元素添加`prop`属性,该属性的值用于标识该表单元素。 3. 使用`rules`属性为每个表单元素定义校验规则,`rules`是一个数组,每个元素代表一个校验规则对象。 4. 在校验规则对象中,可以使用不同的校验方法,如`required`、`min`、`max`、`pattern`等。 5. 可以通过`message`属性为校验规则定义错误提示信息。 下面是一个简单的示例代码: ```html <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' } ] } }; }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单校验通过,执行提交操作 console.log('表单校验通过'); } else { // 表单校验不通过,给出错误提示 console.log('表单校验不通过'); } }); } } }; </script> ``` 在上述示例中,`form`对象是表单数据的模型,`rules`对象定义了表单元素的校验规则。`submitForm`方法用于提交表单,其中通过`this.$refs.form.validate`方法来触发表单校验,并在回调函数中处理校验结果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值