饿了吗表单组件

1 基本使用

在Element-UI官网找例子然后在此基础上修改

2 表单校验

校验必要性

在向后端发请求调用接口之前，我们需要对所要传递的参数进行验证，来把用户的错误扼杀在摇篮之中。

校验内容

内容不能为空
密码长度必须多少位
手机号的格式要合规
邮箱的格式要合规
....

定义规则

步骤1 定义表单验证规则

data() {
  return {
    rules: {
        // 字段名1：表示要验证的属性
        // 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
        //     数组中的多条规则会按顺序进行
        字段名1: [
          { 验证规则1 },
          { 验证规则2 },
        ],
        字段名2: [
          { 验证规则1 },
          { 验证规则2 },
        ], 
    }
  }
}
复制代码

export default {
  data () {
    return {
      rules: {
        phone: [
          // trigger 校验时机：失去焦点
          { required: true, message: '不能为空', trigger: 'blur' },
          { pattern: /^1[0-9]{10}$/, message: '请输入合法的手机号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { pattern: /^[0-9]{6,8}$/, message: '请输入正确的密码', trigger: 'blur' }
        ]
      }
    }
  }
}
复制代码

步骤2 模板中的配置

当这一步完成后，可以验收效果，当用户输入不符合则会提示，正确则不提示

步骤3 手动兜底验证
注意：这三个属性名必须一致

element-ui的表单组件.validate(valid => {
	if(valid) {
	   // 通过了验证
	} else {
	   // 验证失败
	}
})
复制代码

validate方法时表单组件自带的，用来对表单内容进行检验

export default {
  ...
  methods: {
    doLogin () {
      alert('do login...')
    },
    onSubmit () {
      // 提交数据 手动兜底校验
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单校验通过
          this.doLogin()
        } else {
          alert('有错误')
        }
      })
    }
  }
}
复制代码

总结使用流程

1.定义校验规则
2.配置模板
3.手动兜底验证

3 自定义检验规则

格式

rules:{
    属性名1: [
      { 
        // 注意参数顺序
        validator: function (rule, value, callback) {
      		// rule：采用的规则
          // value: 被校验的值
          // callback是回调函数， 
          //      如果通过了规则检验，就直接调用callback()
          //      如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)
        	//         例如：callback(new Error('错误说明'))
      	}, 
        trigger: 'blur' 
     }]
}
复制代码

举例：密码不能是123456

{validator:(rule,value,callback)=>{
  console.log(rule,value,callback);
  if(value==='123456'){
    callback(new Error('密码太简单'))
  }else{
    callback()
  }
},trigger:'blur'}
复制代码

如果其中一个不调用的话兜底验证就通过不了

4 重置表单清理校验痕迹

格式

this.$refs.form组件的引用.resetFields()
复制代码

作用

1.清理校验痕迹
2.回复表单默认数据

Element-UI Form Verification ( 表单校验 )