关于登录校验规则的 trigger 问题

一般的校验规则都在 Form 表单中验证

一:在 Form 表单中添加 value 属性

1.:value = " Rules

2.添加 prop , 对应 :model = " Form" 的 form 属性

3.在 data 中添加属性 rules

4.在点击提交的按钮里进行 validate 校验

二:正则表达式校验手机号码,邮箱,密码,昵称等信息

三:用 validator:验证方法,trigger:验证触发

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-form 表单组件可以使用 `rules` 属性来添加校验规则,具体步骤如下: 1. 在表单控件上添加 `prop` 属性,该属性的值对应表单数据对象中的属性。 2. 在 el-form 上添加 `rules` 属性,该属性的值是一个对象,对象的 key 是对应表单控件的 prop 值,value 是一个数组,数组中包含校验规则。 3. 在表单控件上添加 `v-model` 属性,该属性的值对应表单数据对象中的属性。 例如,在一个登录表单中,需要对用户名和密码进行校验,可以这样写: ```html <template> <el-form :model="loginForm" :rules="loginRules"> <el-form-item label="用户名" prop="username"> <el-input v-model="loginForm.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="loginForm.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 { loginForm: { username: '', password: '', }, loginRules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }, ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }, ], }, }; }, methods: { submitForm() { this.$refs.loginForm.validate((valid) => { if (valid) { // 表单校验通过,可以提交表单 console.log(this.loginForm); } else { // 表单校验未通过,不可以提交表单 return false; } }); }, }, }; </script> ``` 在这个例子中,我们使用了两个 el-form-item 组件来包含用户名和密码的输入框,分别对应 loginForm 对象的 username 和 password 属性。在 el-form 上设置了 loginRules 对象来指定校验规则,其中 username 和 password 分别指定了两个校验规则。在 submitForm 方法中,我们使用了 `$refs` 来获取表单组件,并调用了 validate 方法来进行表单校验。`validate` 方法的回调函数中,如果校验通过,则会返回 `true`,否则会返回 `false`。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值