模块化、高扩展的web验证功能

来源：互联网发布：智慧树网络课程网页版编辑：程序博客网时间：2024/06/06 02:35

模块化、高扩展的web验证功能

web项目中经常会有大量数据的验证功能。

了解web验证功能的模块化与扩展性，能写出

满足所有业务场景需要的验证功能。

验证功能的特点：

1、验证数量不确定

2、不同的字段验证的规则不一样。

4、字段的规则包含多条子规则（非空、数字、字母、长度限制、汉字、规定格式等）

5、会经常删减字段

6、字段的规则会经常变化。

7、会有提交验证和焦点验证的功能

实现思路：

通过层级调用的思路，由应用层一下往逻辑底层调用，在逻辑的最底层

暴露功能的扩展性。

层次从上到下依次为：

1、应用层

2、功能层

3、验证方式扩展层

4、验证字段扩展层

5、验证规则扩展层

1、布局

在相应的验证标签上增加id字段

2.、js

（1）、 submit 调用焦点验证initHoverVerify和提交验证submitVerify验证

（2）、定义焦点验证initHoverVerify和提交验证submitVerify验证

（3）、项目初始化是调用initHoverVerify， initHoverVerify方法调用不同字段的detailHoverVerify

（4）、点击提交按钮是调用submitVerify， submitVerify里调用不同字段的detailsubmitVerify

（5）、 detailHoverVerify里组合调用验证规则，detailsubmitVerify里组合调用验证规则

（6）、定义不同的验证规则方法，在验证规则里执行验证通过和验证不通过的逻辑

实现思路图：

实现代码：

html部分：

<!DOCTYPE html><html><head>    <title></title>    <meta charset=utf-8>    <link rel="stylesheet" type="text/css" href="css/school.css">    <link rel="stylesheet" type="text/css" href="css/jeDate.css">    <script src="js/jquery.min.js"></script>    <script src="js/jquery.tips.js"></script>    <script src="js/jquery.jedate.min.js"></script>    <script src="js/frontAndBackMutuallyJs/schoolPageMutually.js"></script>    <script src="js/pageLayoutJs/schoolPageLayout.js"></script>    <script src="js/applicationPageJs/school.js"></script></head><style type="text/css">body{  background:#F3F7F8;}</style><body><div class="header_padding">    <div class="header">        <div class="xueji">新建学籍档案</div>        <div class="import">导入学籍信息<span></span></div>    </div><div class="school_centent">        <!-- 基本信息 --><div class="Percentage">    <div class="centent">      <p>基本信息</p>        <div class="geRen">            <p style="padding-top:5px;padding-bottom:5px;">头像</p>            <div class="touXiang"></div>        </div>        <div class="centent_left">            <div class="centent_padding_left">                <p>学籍号</p>                   <p class="dianji">点击填写</p>                   <input type="text" placeholder="学籍号" id="stuNum">            </div>            <div class="centent_padding_left">                <p>姓名</p>                   <p class="dianji">点击填写</p>                   <input type="text" placeholder="姓名" id="stuName">            </div>            <div class="centent_padding_left">                <p>出生年月</p>                <p class="dianji">点击填写</p>                <input type="text" placeholder="出生年月" class="birth">            </div>        </div>        <div class="centent_left" style="margin-left: 20px;">            <div class="centent_padding_left">                <p>电子学生证ID</p>                   <p class="dianji">点击填写</p>                   <input type="text" placeholder="电子学生证ID" id="stuCardId">            </div>            <div class="centent_padding_left">                <p>名族</p>                   <p class="dianji">点击填写</p>                   <input type="text" placeholder="民族" id="nation">            </div>            <div class="centent_padding_left">                <p>性别</p>                   <p class="dianji">点击填写</p>                   <input type="text" placeholder="性别" id="sex">            </div>        </div>    </div></div><!-- 户口信息及现居地 --><div class="Percentage">  <div class="centent">  <p>户口信息及现居地</p>      <div class="centent_left">          <div class="centent_padding_left">              <p>户口所在地、国家、省、市、区</p>                 <p class="dianji">点击填写</p>                 <div class="sanJi">                      <select>                          <option value="blind">请选择</option>                      </select>-                      <select>                          <option value="blind">请选择</option>                      </select>-                      <select>                          <option value="blind">请选择</option>                      </select>                 </div>          </div>          <div class="centent_padding_left">              <p>现居住地、国家、省、市、区</p>                 <p class="dianji">点击填写</p>                 <input type="text" placeholder="现居住地、国家、省、市、区" id="currentCity">          </div>          <div class="centent_padding_left">              <p>联系电话</p>              <p class="dianji">点击填写</p>              <input type="text" placeholder="联系电话" id="stuTelephone">          </div>      </div>      <div class="centent_left" style="margin-left: 20px;">          <div class="centent_padding_left">              <p>详细地址</p>                 <p class="dianji">点击填写</p>                 <input type="text" placeholder="详细地址" id="censusAddress">          </div>          <div class="centent_padding_left">              <p>详细地址</p>                 <p class="dianji">点击填写</p>                 <input type="text" placeholder="详细地址" id="currentAddress">          </div>          <div class="centent_padding_left">              <p>邮编</p>                 <p class="dianji">点击填写</p>                 <input type="text" placeholder="邮编" id="stuPostcode">          </div>      </div>  </div></div>        <!-- 家庭信息 --><div class="Percentage">    <div class="centent">    <p>家庭信息</p>    <div class="geRen">        <p style="padding-top:5px;padding-bottom:5px;">头像</p>        <div class="touXiang"></div>    </div>        <div class="centent_left">            <div class="centent_padding_left">                <p>姓名</p>                   <p class="dianji">点击填写</p>                   <input type="text" placeholder="姓名" id="parentName">            </div>            <div class="centent_padding_left">                <p>联系电话</p>                   <p class="dianji">点击填写</p>                   <input type="text" placeholder="联系电话" id="parentPhone">            </div>        </div>        <div class="centent_left" style="margin-left: 20px;">            <div class="centent_padding_left">                <p>关系</p>                   <p class="dianji">点击填写</p>                   <input type="text" placeholder="关系" id="relation" >            </div>            <div class="centent_padding_left">                <p>邮编</p>                   <p class="dianji">点击填写</p>                   <input type="text" placeholder="邮编" id="parentPostcode">            </div>        </div>    </div></div><!-- 入学信息 --><div class="Percentage">    <div class="centent">    <p>入学信息</p>        <div class="centent_left">            <div class="centent_padding_left">                <p>来源变动</p>                   <p class="dianji">点击填写</p>                   <input type="text" placeholder="来源变动" id="sourceChange">            </div>            <div class="centent_padding_left">                <p>入学校院</p>                   <p class="dianji">点击填写</p>                   <input type="text" placeholder="入学校院" id="entranceCollege">            </div>            <div class="centent_padding_left">                <p>入学学期</p>                   <p class="dianji">点击填写</p>                   <input type="text" placeholder="入学学期" id="entranceSemester">            </div>            <div class="centent_padding_left">                <p>备注信息</p>                   <p class="dianji">点击填写</p>                   <input type="text" placeholder="备注信息" id="remarkInfo">            </div>        </div>        <div class="centent_left" style="margin-left: 20px;">            <div class="centent_padding_left">                <p>入学时间</p>                   <p class="dianji">点击填写</p>                   <input type="text" class="birth"  placeholder="入学时间" id="entranceDate" readonly >            </div>            <div class="centent_padding_left">                <p>入学年级</p>                   <p class="dianji">点击填写</p>                   <input type="text" placeholder="入学年级" id="entranceGrade">            </div>            <div class="centent_padding_left">                <p>户口类型</p>                   <p class="dianji">点击填写</p>                   <select class="household">                        <option value="blind">请选择</option>                  </select>            </div>        </div>    </div></div>  <!-- 底部信息 -->  <div class="centent">      <div class="bottom_auto">          <div class="preservation" id="preservation">保存并新建学籍档案</div>          <div class="cancel">取消</div>      </div>  </div></div>    <script src="js/jquery.min.js"></script>    <script src="js/jquery.tips.js"></script>    <script src="js/jquery.jedate.min.js"></script></body><script type="text/javascript">    $(function(){          $(".birth").jeDate({              format: "YYYY-MM-DD",              isClear: false,                                       isToday: false,           })        $(".centent_padding_left .dianji").click(function(){            $(".centent_padding_left").css("background","#fff");            $(this).css("display","none");            $(this).next().css({"display":"block"});            $(this).parent().css("background","#0f0");            $(this).next().focus();        })        $(".centent_padding_left input").focus(function(){          $(".centent_padding_left").css("background","#fff");          $(this).parent().css("background","#0f0");        })})</script></html>

js部分：

function schoolPageMutuallyModule() {    //提交功能    submit();}function submit() {    var preservation=document.getElementById("preservation");    //浮动验证模块    //  inithoverVerify();        preservation.onclick=function () {        submitAjax();    }    //提交验证模块    function submitAjax() {        submitVerify();    }    //提交验证模块    function submitVerify() {        var isVerify=true;        //学籍号验证        if(!stuNumSubmitVerify("stuNum")){            isVerify=false;        }        //姓名验证        if(!stuNameSubmitVerify("stuName")){            isVerify=false;        }                //判断是否验证通过        if (!isVerify){            return;        }        //恢复所有输入框        $(".dianji").next().css("borderColor","#6AC6ED");        //执行提交        alert("提交成功");    }    //焦点验证模块    function  inithoverVerify(idStr) {         //学籍验证        stuNumHoverVerify("stuNum");        //姓名验证        stuNameHoverVerify("stuName");
 }


     //学籍号提交验证    function stuNumSubmitVerify(idStr){        var isEmpty=isEmptyVerify(idStr);        if(isEmpty==false){            return false;        }        var isLength=lenghtVerify(idStr,5,11);        if(isLength==false){            return false        }        return true;    }    //学籍号焦点验证    function stuNumHoverVerify(idStr) {        $("#"+idStr).hover(function () {            $("#"+idStr).css("borderColor","#6AC6ED");        },function () {            var isEmpty=isEmptyVerify(idStr);            if(isEmpty==false){                return;            }            lenghtVerify(idStr,5,11);        });        $("#"+idStr).change(function () {            var isEmpty=isEmptyVerify(idStr);            if(isEmpty==false){                return;            }            lenghtVerify(idStr,5,11);        });    }    //姓名提交验证    function stuNameSubmitVerify(idStr){        var isEmpty=isEmptyVerify(idStr);        if(isEmpty==false){            return false;        }        var isLength=lenghtVerify(idStr,5,11);        if(isLength==false){            return false        }        return true;    }    //姓名焦点验证    function stuNameHoverVerify(idStr) {        $("#"+idStr).hover(function () {            $("#"+idStr).css("borderColor","#6AC6ED");        },function () {            var isEmpty=isEmptyVerify(idStr);            if(isEmpty==false){                return;            }            lenghtVerify(idStr,5,11);        });        $("#"+idStr).change(function () {            var isEmpty=isEmptyVerify(idStr);            if(isEmpty==false){                return;            }            lenghtVerify(idStr,5,11);        });    }        //非空验证    function isEmptyVerify(idStr) {            var value=document.getElementById(idStr).value;            if(value==""){                $("#"+idStr).css("display","block");                $("#"+idStr).tips({                    msg: "不能为空",                    side:1,                    color:'#FFF',                    bg:'#000',                    time:2                })                $("#"+idStr).css("borderColor","#f00");                return false;            }else {                $("#"+idStr).css("borderColor","#6AC6ED");                return true;            }    }    //长度验证    function lenghtVerify(idStr,minlenght,maxlenght) {            var value=document.getElementById(idStr).value;            if(value.length>minlenght&&value.length<maxlenght){                $("#"+idStr).css("borderColor","#6AC6ED");                return true;            }else {                $("#"+idStr).css("display","block");                $("#"+idStr).tips({                    msg: "长度须为"+minlenght+"-"+maxlenght,                    side:1,                    color:'#FFF',                    bg:'#000',                    time:2                })                $("#"+idStr).css("borderColor","#f00");                return false;            }    }        //电话号码验证    function telePhoneVerify(idStr) {        var value=document.getElementById(idStr).value;        var format = /^1(3|4|5|7|8)\d{9}$/;        if(format.test(value)){            $("#"+idStr).css("borderColor","#6AC6ED");            return true;        }else {            $("#"+idStr).css("display","block");            $("#"+idStr).tips({                msg: "手机号格式错误",                side:1,                color:'#FFF',                bg:'#000',                time:2            })            $("#"+idStr).css("borderColor","#f00");            return false;        }    }        //邮编验证    function parentPostcodeVerify(idStr) {        var value=document.getElementById(idStr).value;        var format = /^[0-9]{6}$/;        if(format.test(value)){            $("#"+idStr).css("borderColor","#6AC6ED");            return true;        }else {            $("#"+idStr).css("display","block");            $("#"+idStr).tips({                msg: "邮编格式错误",                side:1,                color:'#FFF',                bg:'#000',                time:2            })            $("#"+idStr).css("borderColor","#f00");            return false;        }    }

阅读全文

0 0