最近项目中一直使用的element-ui作为前端框架,对于最常使用的表单验证,做出以下总结:
<强>第一种常用方式:表单上加规则{对象}
& lt; el-form class="申请表先建立”:模型=癴ormData”:规则=肮嬖颉眗ef=靶问健痹?
& lt; el-form-item标签="姓名“道具=皏isitorName”比;
& lt; el-input v模型=" formData。visitorName "占位符="请输入姓名“clearable> & lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item标签="身份证号”道具=癱ardCode”比;
& lt; el-input v模型=" formData。cardCode”:最大长度=?8”占位符="请输入身份证号”clearable> & lt;/el-input>
& lt;/el-form-item>
& lt;/el-form>
这种方式需要在数据()中写入规则{},对于需要校验字段道具中的如visitorName写上验证规则,如下:
数据(){
返回{
formData: {
visitorName:”,
cardType: 1、
cardCode:“
}，
规则:{
visitorName:(
{要求:真实、消息:“请输入姓名”,触发:“模糊”},
{分钟:2,马克斯:10日消息:“长度在2到10个字符”,触发:“模糊”},
{
要求:没错,
模式:/^ [\ u4e00 - \ u9fa5_a-zA-Z0-9。·] +/美元,
消息:“姓名不支持特殊字符”,
触发:“模糊”
}
]，
cardCode:(
{要求:真实、消息:“请输入身份证号”,触发:“模糊”},
马克斯:{分钟:15日18日消息:“请如实填写18位号码,以供学校保卫科核对”,触发:“模糊”},
{
要求:没错,
模式:/(^ \ d {15} $) | (^ \ d {18} $) | (^ \ d {17} (\ d | | X) $)/,
消息:“请输入正确的身份证号码”,
触发:“模糊”
}
］
}
}
}
其中对于有些需要自定义的校验规则可以作为变量写在数据中:
数据(){
让reg=/(& # 63; ! ^ (\ d + | [a-zA-Z] + | [~ ! @ # $ % ^, * & # 63;] +) $) ^ (\ w ~ ! @ # $ % ^, * & # 63;]{6、12}/美元
var validateNewPwd=(规则,价值,回调)=比;{
如果(! reg.test(值)){
回调(新的错误(“密码应是6 - 12位的数字,字母或字符!”))
如果(this.form}其他。oldPasswd===值){
回调(新的错误(“新密码与旧密码不可一致!”))
其他}{
回调()
}
}
var validateComfirmPwd=(规则,价值,回调)=比;{
如果(! reg.test(值)){
回调(新的错误(“密码应是6 - 12位的数字,字母或字符!”))
如果(this.form}其他。newPasswd !==值){
回调(新的错误(“确认密码与新密码不一致!”))
其他}{
回调()
}
}
返回{
形式:{
newPasswd:”,
comfirmPwd:“
}，
规则:{
newPasswd:(
{要求:真实、消息:“请输入新密码”,触发:“模糊”},
{验证器:validateNewPwd,触发:‘模糊’}
]，
comfirmPwd:(
{要求:真实、消息:“请输入确认密码”,触发:“模糊”},
{验证器:validateComfirmPwd,触发:‘模糊’}
］
}
}
}
比较适用于表单全部字段校验或需要校验字段类型比较简单的数据类型
<强>第二种方式:在el-form-item单个添加
& lt; el-form-item标签="电话号码”class=癳l-form-item——小has-error”:支持=皃honeNum”:规则="[{要求:真的,信息:“请输入电话号码”,触发:“模糊”},{要求:真的,模式:/^ ((13 14 15 16 17 | | | | | 18)[0 - 9]{1}\ d {8}) | ((166 | 199 | 198) [0 - 9] {1} \ d{7})/美元,消息:“请输入正确的电话号码”,触发:‘模糊’}]“比;
& lt; el-input v模型=" v。phoneNum”:最大长度=" 11 "占位符clearable> & lt;/el-input>
& lt;/el-form-item>
这种方式适用于需要个别检验的字段,或者表单字段有变动的校验;
<强>第三种方式:动态增减表单项
先看需求效果图
对应的数据结构:
对应删除增加表单项的操作为:
addPhone () {
让len=this.formData.phoneInfoList.length
设置(this.formData美元。len phoneInfoList, {
关系:[],
phoneNum:”,
relationType: 0,
schoolId: this.selectedUser.schoolId,
userCode: this.selectedUser.userCode
})
}，
deletePhone(项){
如果(this.formData.phoneInfoList。长度比;1){//表示先获取这个元素的下标,然后从这个下标开始计算,删除长度为1的元素
this.formData.phoneInfoList.splice (this.formData.phoneInfoList.indexOf(项),1);
其他}{
vux.toast.text美元。(“至少保留一个家长亲情号码!”)
返回假
}
},
