(1)、required:true 必输字段
(2)、remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验证输入值
(3)、email:true 必须输入正确格式的电子邮件
(4)、url:true 必须输入正确格式的网址
(5)、date:true 必须输入正确格式的日期,日期校验ie6出错,慎用
(6)、dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)、number:true 必须输入合法的数字(负数,小数)
(8)、digits:true 必须输入整数
(9)、creditcard:true 必须输入合法的信用卡号
(10)、equalTo:"#password" 输入值必须和#password相同
(11)、accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)、maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)、minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)、rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)、range:[5,10] 输入值必须介于 5 和 10 之间
(16)、max:5 输入值不能大于5
(17)、min:10 输入值不能小于10
1.Vue中设置对应的验证信息
<!-- 表单验证
el-form绑定
model:绑定数据
rules:验证规则
ref='form'用于获取实例对象
el-from-item
prop='需要验证的字段名'
-->
<el-form ref="form" :model="form" :rules="rules">
2.把数据绑定到对应的表单输入框
<el-form-item prop="mobile">
<el-inputv-model="form.mobile"/>
</el-form-item>
3.书写校验的规则
data() {
return {
form: {
mobile: '13800000002',
password: '123456'
},
rules: {
//required.必填 message.提示信息 teigger 触发提示信息的方式
mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' },
{ min: 11, max: 11, message: '请输入11位手机号', trigger: 'burl' },
{ validate: (rule, value, callback) => {
const reg = '/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/'
if (reg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的手机号'))
}
} }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }, {
min: 6, max: 12, message: '请输入6-12位密码', trigger: 'blur'
}]
}
}
},
VUE中没有键盘enter事件.但是可以通过下面方法实现
@keyup.enter.native="submit"
// native