element-ui 表单校验

绑定的数据

:model="ruleForm"

校验规则

:rules="rules"

//html
:rules="rules" prop="account"
//js
rules：{
 account: {required: true, message: "请输入您要注册的账号", trigger: "blur" },
          {min: 6,max: 16, message: "账号应该由字母开头6~16位组成，不可使用特殊符号",trigger: "blur"}
          {required: true,pattern:/^[a-zA-z]\w{5,15}$/,message: "账号应该由字母开头6~16位组成",trigger: "blur"}
      }

绑定的表单

ref="ruleForm" 绑定过在下面通过下面方法来校验表单

['ruleForm']//一般代表表单名字
//全部验证
this.$refs['ruleForm'] .validate((vakid) =>{
 if (vakid){
  console.log("成功", ture);//通过校验     
 }eles{
     console.log("error", false); //未通过校验
 }
})
//局部验证
['ruleForm']//一般代表表单名字
['Email']//要验证表单的那个要求
this.$refs['ruleForm'] .validate(['Email'] (vakid) =>{
 if (vakid){
  console.log("成功", ture);//通过校验     
 }eles{
     console.log("error", false); //未通过校验
 }
})

Api详解

参数	说明	类型	可选值	默认值
model	绑定的数据	object	—	—
rules	表单验证的规则	object	—	—
inline	行内表单模式	boolean	—	false
size	用于控制该表单内组件的尺寸	string	medium / small / mini	—
disabled	是否禁用该表单内的所有组件。	boolean	—	false
validate-on-rule-change	表单验证规则触发过就在触发他一次	boolean	—	true
status-icon	是否在输入框中显示校验结果反馈图标	boolean	—	false
inline-message	是否以行内形式展示校验信息	boolean	—	false
show-message	是否显示校验错误信息	boolean	—	true
hide-required-asterisk	是否显示必填字段的标签旁边的红色星号	boolean	—	false
label-suffix	表单域标签的后缀	string	—	—
abel-width	表单域标签的宽度，作为 Form 直接子元素的会继承该值。支持 auto	string	—	—
label-position	表单域标签的位置，如果值为 left 或者 right 时，需要设置 label-width	string	right/left/top	right

自带的回调函数 Form Methods

方法名	说明	参数
validate	校验整个表单方法，参数为一个回调函数。该回调函数会在校验结束后被调用	Function(callback: Function(boolean, object))
validateField	对部分表单字段进行校验的方法	Function(props: array \| string, callback: Function(errorMessage: string))
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	—
clearValidate	移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果	Function(props: array \| string)
validate	任一表单项被校验后触发	被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）