rules表单校验常用属性

表单校验规则

第三方校验规则参见 async-validator
点击跳转

几个基本使用的规则

规则说明
required如果为true,表示该字段为必填
message当不满足设置的规则时的提示信息
pattern正则表达式,通过正则验证值
min当值为字符串时,min表示字符串的最小长度,当值为数字时,min表示数字的最小值
max当值为字符串时,max表示字符串的最大长度,当值为数字时,max表示数字的最大值
trigger校验的触发方式,change(值改变) / blur (失去焦点)两种,
validator如果配置型的校验规则不满足你的需求,你可以通过自定义函数来完成校验

自定义校验规则

validator是一个函数, 其中有三个参数 (rule(当前规则),value(当前值),callback(回调函数))

// 自定义校验函数
    const checkMobile = function (rule, value, callback) {
      value.charAt(2) === '9' ? callback() : callback(new Error('第三位手机号必须是9'))
    }

 mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }, {
            trigger: 'blur',
            validator: checkMobile
   }],
  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue表单校验规则(rules)是一种用于验证表单数据的对象。它通常用于Vue.js框架中的表单组件中,可以在表单提交前进行数据验证,以确保数据的有效性和一致性。以下是Vue表单校验rules规则的一些常见属性: - required:必填项 - min:最小值 - max:最大值 - minLength:最小长度 - maxLength:最大长度 - pattern:正则表达式 - email:电子邮件 - url:网址 - date:日期 - digits:数字 除了以上常见属性,还可以自定义规则,如: ``` rules: { // 自定义规则 age: [ { required: true, message: '请输入年龄' }, { type: 'number', message: '年龄必须为数字值' }, { min: 18, max: 120, message: '年龄必须在18~120之间' } ] } ``` 在Vue.js中,可以通过v-model指令绑定表单数据,使用rules规则进行验证。例如: ``` <template> <form> <label>用户名:</label> <input type="text" v-model="username" :class="{ 'is-invalid': errors.username }"> <div v-if="errors.username" class="invalid-feedback">{{ errors.username }}</div> <label>密码:</label> <input type="password" v-model="password" :class="{ 'is-invalid': errors.password }"> <div v-if="errors.password" class="invalid-feedback">{{ errors.password }}</div> <button type="submit" @click.prevent="handleSubmit">提交</button> </form> </template> <script> export default { data() { return { username: '', password: '', errors: {} } }, methods: { handleSubmit() { const errors = {} if (!this.username) { errors.username = '用户名不能为空' } if (this.password.length < 6) { errors.password = '密码长度不能小于6位' } if (Object.keys(errors).length === 0) { // 提交表单 } else { this.errors = errors } } } } </script> ``` 上面的代码中,使用v-model指令绑定了username和password两个表单数据。在handleSubmit方法中,手动进行了数据验证,并将错误信息存储在errors对象中。如果errors对象不为空,则表示表单数据不合法,需要显示错误提示信息。否则,可以提交表单。这种方式虽然简单,但是需要手动编写大量的验证代码。如果表单比较复杂,这种方式就显得不太方便。因此,可以使用Vue表单校验rules规则来简化表单验证流程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值