【js--封装组件】表单校验

开始

用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
    }
}

<