前端数据校验Rules

最新推荐文章于 2023-07-12 09:30:03 发布

转载最新推荐文章于 2023-07-12 09:30:03 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/1ee3cdde1233

文章标签：

#前端 #vue.js #elementui

vue-数据校验专栏收录该内容

1 篇文章

订阅专栏

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

 <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是万能的。
我们看看效果：