黑马程序员技术交流社区

标题: 【西安校区】element-ui 表单必填项和表单验证方式解析,以... [打印本页]

作者: 逆风TO    时间: 2019-3-12 15:57
标题: 【西安校区】element-ui 表单必填项和表单验证方式解析,以...
(一)表单必填项
需求:表单里必填项需要有红色星号标识,当未填写时显示中文提示语
思路:表单项里写required
问题:当表单项的验证规则绑定为blur事件时,表单项内元素清空后,会提示“xx is required”,其中xx是绑定的prop值。
解决办法:在表单项里模拟红色星号的样式,去掉required,写class=“is-required”,必填的限制在绑定的rules里写。

(二)表单验证方式解析
<el-form :model="form" :rules="rules" ref="form" class="form-inline" >
</el-form>
model:表单控件绑定的数据对象,在校验或重置时会访问该数据对象下对应的表单数据,类型为 Object。
rules:表单验证规则,即上面介绍的 async-validator 所使用的校验规则,类型为 Object。
ref必须加,还得和model一样
<el-form-item prop="email" label="邮箱">
    <el-input v-model="form.email"></el-input>   
</el-form-item>
el-form-item 里面的prop是rules里面对应的名称的验证内容,而验证的就是v-model里面的值存不存在

在点击保存按钮时(@click="handleOk('form')),进行验证

handleOk(formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      // 表单验证通过之后的操作
    } else {
      console.log('error submit!!');
      return false;
    }
  });
},
(三)表单验证规则
rules: {
  email: [{ required: true,validator: checkEmail, trigger: "blur" }],
  user_name: [{ required: true, message: "请输入电话号码", trigger: "blur" }],
}
自定义验证规则:

data() {
  let checkEmail = (rule, value, callback) => {
    //邮箱正则
    var reg = new RegExp(
      "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
    );
    if (!value) {
      callback(new Error("邮箱地址不能为空"));
    } else if (!reg.test(value)) {
      callback(new Error("请输入正确的邮箱地址"));
    } else {
      callback();
    }
  };
},







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2