开始
用js完成表单校验功能
效果图
思路
- 获取表单并循环表单项
- 获取表单项中自定义的属性判断是否有校验类型
- 获取表单项中自定义的属性判断是否为必填项
- 如果为必填项,添加加上必填项 *,判断是否填入,符合则不作处理,不符合则在表单项下显示提示信息
- 判断必填项类型
- 校验必填项是否符合规则
- 符合则不作处理,不符合则在表单项下显示提示信息
- 获取表单项中校验类型
- 有校验类型则校验是否符合规则
- 获取表单项中自定义的属性判断是否为必填项
表单和样式
自定义属性说明
1.inputType (String) 校验类型
2.inputName (String) 表单项名称(方便显示提示信息)
3.mustInput (Boolean) 是否必填项
index.html
<div class="login-wrap">
<form id="user_login" class="form" action="" name="user_login">
<div class="form-item">
<label class="item-label asterisk" style="width: 85px;">用户名:</label>
<div class="item-content">
<input class="item-input name" name="username" id="accountName" type="text" inputType="string" mustInput="true" inputName="用户名" placeholder="请输入用户名">
</div>
</div>
<div class="form-item">
<label class="item-label asterisk" style="width: 85px;">密码:</label>
<div class="item-content">
<input class="item-input code" name="password" id="password" inputType="string" type="password" mustInput="true" inputName="密码" placeholder="请输入密码">
</div>
</div>
<div class="form-item">
<label class="item-label asterisk" style="width: 85px;">联系电话:</label>
<div class="item-content">
<input class="item-input date" name="phone" inputType="phone" mustInput="true" inputName="日期">
</div>
</div>
<div class="form-item">
<label class="item-label asterisk" style="width: 85px;">年龄:</label>
<div class="item-content">
<input class="item-input date" name="age" inputType="int" mustInput="true" inputName="数字">
</div>
</div>
<div class="form-item">
<label class="item-label asterisk" style="width: 85px;">是否最后:</label>
<div class="item-content">
<input class="item-input" type="radio" name="whatever" value="1" checked><text class="label-text">是</text>
<input class="item-input ml10" type="radio" name="whatever" value="0"><text class="label-text">否</text>
</div>
</div>
<div class="btn">
<input type="button" id="submit" class="submit" value="登录" onclick="submitForm(this.form,'user_login');">
<input type="reset" id="reset" class="reset" value="重置" >
</div>
<div id="CheckMsg" class="msg"></div>
</form>
</div>
css样式
.form-item{
display: flex;
line-height: 30px;
margin-bottom: 17px;
flex: 1;
}
.item-label{
font-weight: bold;
color: #333333;
text-align: right;
font-size: 14px;
}
.item-input{
height: 30px;
line-height: 30px;
border: 1px solid #e5e5e5;
cursor: inherit;
border-radius: 4px;
padding: 0 15px;
color: #606266;
}
.is-error{
color: #F56C6C;
font-size: 12px;
line-height: 1;
padding-top: 4px;
position: absolute;
}
.asterisk:before{
content: '*';
color: #F56C6C;
margin-right: 4px;
}
.label-text{
position: relative;
top: -10px;
left: 5px;
}
.ml10{
margin-left: 10px;
}
.btn{
margin-left: 84px;
}
表单校验
表单校验放在form.js中
获取表单并循环表单项
function formValidate(formName){
let form = document.forms[formName];
for (let i=0;i<form.length;i++){
let item = form[i]
let inputType = item.getAttribute('inputType')
if (!inputType) continue; //当没有校验类型时说明不用校验
item.setAttribute('onblur','test(this)') //添加blur
}
}