前端数据校验Rules

开发一个小功能过程中,需要录入邮箱和手机号,这两项是用户输入的,为了限定用户不能随心所欲的输入,避免存入数据库的数据为脏数据,就需要加入验证规则。
功能:弹窗,表单保存用户名、密码、邮箱、手机号。

 <el-dialog
      title="添加用户"
      :visible.sync="addDialogVisible"
      @close="addDialogClosed"
      width="50%">
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
:rules="addFormRules"

是校验规则相关的内容,我们在data中定义了addFormRules.

     addFormRules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        },
        {
          min: 3,
          max: 10,
          message: '用户名长度在3-10个字符之间',
          trigger: 'blur'
        }
        ]
      }

以用户名为例子, required: true表示必填, message: '请输入用户名'则为提示信息,trigger: 'blur'出发校验,min,max则校验了我们要求的字符串长度,这个不难理解,因为这是利用现有的规则进行了校验,那么邮箱和手机号这两种该如何去写,这里vue提供了自定义校验规则的写法。


首先我们在data中先定义两个validator

 data () {
    const checkEmail = (rule, value, cb) => {
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
        return cb()
      }
      cb(new Error('请输入正确的邮箱'))
    }
    const checkMobile = (rule, value, cb) => {
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        return cb()
      }
      cb(new Error('请输入正确的手机号'))
    }
  }

然后在我们自己的addFormRules中进行使用:

  addFormRules: {
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          },
          {
            // 通过validator 进行自定义校验规则
            validator: checkEmail,
            trigger: 'blur'
          }
        ],
        mobile: [
          {
            required: true,
            message: '请输入手机',
            trigger: 'blur'
          },
          {
            validator: checkMobile,
            trigger: 'blur'
          }
        ]
      }

写法是固定的,也不难理解,唯一的难点可能就是对于正则表达式的写法不太熟练,也不用难为自己,ctrl+c是万能的。
我们看看效果:

资源来自:简书的某位用户,非原创。(感谢这位大佬),下面是文章地址。

Vue中:rules添加验证规则 - 简书 (jianshu.com)

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值