饿了么 UI 表单验证

太难了我叫CZ
1,632 阅读2分钟

饿了么 UI 表单验证

通常我们使用，el-from 这个组件的时候，有两种方式去做表单验证。 一种是使用 el-from 的 rules 做验证。

首先我们需要在引用的 el-from 绑定 一个在 data 中声明的 rules 对象。如下代码：

<el-form ref="ruleForm" :model="ruleForm" :rules="loginRules">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
</el-form>

data(){
 return {
  ruleForm: {
   name: '',
   region: '',
  },
  loginRules:{
  name: [
   { required: true, message: '请输入活动名称', trigger: 'blur' },
   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  ],
  region: [
   { required: true, message: '请选择活动区域', trigger: 'change' }
  ],
  }
 }
}

image.png

如上图需要注意在相同颜色的地方需要保持对应关系。

  • rules:绑定验证规则的对象，对象的每个属性 需要和model中的属性相互对应
    • 每个属性的值:如上图中rules中的name可以是一个数组，每一条就是一个验证规则
      • required : 表示是否必填
      • message : 表示错误时提示给用户的信息
      • trigger : 表示触发这一个验证规则的事件 常见的有两种('blur' 'change')
  • model: 这个表示表单的数据，用来告诉表单验证应该验证哪一个data对象的值。
  • prop ：这个是绑定在el-form-item 上的，他的值应该和 他包裹的元素的键值是相同的。
    • 用来在这里显示验证错误的提示信息。
    • 不加则不会验证。

当我们定义好验证规则之后我们需要使用$ref调用表单的验证函数触发验证，在promise返回值为true时表示验证通过，如下代码


  this.$refs['ruleForm'].validate((valid) => {
    if (valid) {
      alert('验证通过');
    } else {
      console.log('验证失败！');
      return false;
    }
  });

除此外官方的文档上没有提到做复杂的验证，比方说你做 邮箱验证 之类的。 在vue-element-admin有这么一段代码。

如果需要验证邮箱或者身份证等...只需要按下面的步骤编写正则的方法就可以实现。


export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      // 创建一个验证邮箱的正则表达式
      const reg = RegExp(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/)
      if (!reg.test(value)) {
        callback(new Error('请输入正确的邮箱地址'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error(''))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: '',
        password: '',
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
}

image.png

如上图,验证规则不再是使用配置属性的方式，而是在data方法种定义了一个方法的常量。 方法接收三个参数

如上图的validateUsername 方法：

rule:表示验证的规则，上面的代码我们自行验证。

value:表示等待验证的值

callback: 验证结束后需要调用的回调，他将用来展示错误信息，如果没有给这个回调函数传参，则表示不展示错误信息。

其他

除了以上两种验证的方式外，我们还可以自行验证表单的信息是否是正确的。

例如： 提交一个带邮箱的表单，在不使用ele-mentui的时候我们如何验证。


export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '', // 邮箱账号
        password: '',
      },
    }
  },
  methods: {
    submit(){
      // 创建一个正则表达式
      const reg = RegExp(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/)

      if (!reg.test(this.loginForm.username)) {
        this.$message.warning('请输入正确的邮箱地址')
        return
      }

      //.... 请求接口提交表单

    },
  }

如上代码，我们在提交表单之前创建了一个正则表达式，用于验证表单信息种 username的值是否时一个邮箱。

当其不时邮箱的时候，我们提示信息，并且不再执行提交操作。

总结

表单验证分两种

一种时UI自带的验证。参考对应UI文档即可。

第二种是在提交操作时对数据进行验证。

根据情况选择合适的方式即可。

avatar
文章
阅读
粉丝