Element-UI Form Verification ( 表单校验 )

·  阅读 1295

饿了吗表单组件

1 基本使用

image.pngElement-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 模板中的配置

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

image.png

  • 步骤3 手动兜底验证


注意:这三个属性名必须一致

image.png

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('有错误')
        }
      })
    }
  }
}
复制代码

image.png

总结使用流程

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'}
复制代码

image.png

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

image.png

4 重置表单清理校验痕迹

格式

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

作用

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

image.png

image.png

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改