使用JQ对表单进行全面校验
使用JQ对表单进行全面校验
springAndMybaties 发表于1个月前
使用JQ对表单进行全面校验
  • 发表于 1个月前
  • 阅读 9
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云实验室 1小时搭建人工智能应用,让技术更容易入门 免费体验 >>>   

摘要: 对于常用的校验都进行了校验

1.效果

2.代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>JQ校验表单</title>
        <script src="../js/jquery-3.2.1.js"></script>
        <script>
            $(function() {
                //1.对账号进行校验
                $("#loginID").focus(function() {
                    //1.1 提醒用户谨慎填写   当输入框里面输入了内容后提醒消失  拿到输入框的内容看看是否是空的  空的提示  不空提示消失
                    var val = $("#loginID").val();
                    if(val == '') {
                        $("#loginInfo").html("<font style='color: red;'>请谨慎填写!</font>");
                    }

                    //1.2 当用户没有输入任何内容就告诉他需要填写,校验账号长度   如果 小于6位 或者大于12位  就提示它   最后要去后台校验是否该账号已经被注册了  发出ajax请求  将得到的值进行判断
                    $("#loginID").blur(function() {
                        var len = $("#loginID").val().length; //拿到用户输入的内容长度
                        if(len < 6 || len > 12) {
                            if(len == 0) {
                                $("#loginInfo").html("<font style='color: red;'>账号未输入!</font>");
                            } else {
                                $("#loginInfo").html("<font style='color: red;'>账号长度6--12位</font>");
                            }

                        } else {
                            //这里应该是ajax请求   如果 后台传回的标记是未注册   
                            //$("#loginInfo").html("");
                            //否则    提醒他已经注册
                            $("#loginInfo").html(""); //这里就不去校验后台了  
                        }
                    });

                });

                //2.对密码进行校验  长度至少6位
                $("#pwd").blur(function() {
                    var plen = $("#pwd").val().length;
                    if(plen < 6) {
                        if(plen == 0) {
                            $("#pwdInfo").html("<font style='color: red;'>密码不能为空!</font>")
                        } else {
                            $("#pwdInfo").html("<font style='color: red;'>密码至少6位!</font>");
                        }

                    } else {
                        $("#pwdInfo").html("");
                    }
                });
                //3.确认密码  要求与密码的内容相同
                $("#rpwd").blur(function() {
                    var oldpwd = $("#pwd").val();
                    var newpwd = $("#rpwd").val();
                    if(oldpwd != newpwd) {
                        $("#rpwdInfo").html("<font style='color: red;'>密码不一致!</font>");
                    } else {
                        $("#rpwdInfo").html("");
                    }
                });
                //4.姓名  非空校验  required="required" 在html里校验
                //5.年龄校验    只能是数字     不能小于 0   且不能大于120
                $("#age").keypress(function(e) {
                    var keynum
                    var keychar
                    var numcheck

                    if(window.event) // IE
                    {
                        keynum = e.keyCode
                    } else if(e.which) // Netscape/Firefox/Opera
                    {
                        keynum = e.which
                    }
                    keychar = String.fromCharCode(keynum)
                    numcheck = /\d/ //数字的正则表达式
                    return numcheck.test(keychar) //  !numcheck.test(keychar)   表示不能输入数字了
                });
                //大于0   小于120
                $("#age").blur(function() {
                    var valAge = $("#age").val();
                    if(valAge < 0 || valAge > 120) {
                        $("#ageInfo").html("<font style='color: red;'>年龄必须在0---120之间</font>");
                    } else {
                        $("#ageInfo").html("");
                    }
                });
                //6. 省市二级联动
                //6.1定义一个二维数组 存放 城市
                var cities = new Array();
                cities[0] = new Array("朝阳区", "海淀区", "昌平区");
                cities[1] = new Array("浦东区", "虹口区", "金山区");
                cities[2] = new Array("福田区", "罗湖区", "坪山区");
                $("#provice").change(function() {
                    //6.2拿到用户选择的省份
                    var pro = $(this).val();
                    var citys = cities[pro];
                    //清空市下拉框内容原来的内容    将城市数组进行遍历 追加到  市选择框
                    var cityElement = $("#city")[0] //转化为JS对象
                    cityElement.length = 0; //清空城市下拉框
                    $(citys).each(function(index, name) {
                        //alert(index+"---"+name)//遍历拿到选择省份下面的城市的索引 及值
                        $("#city").append("<option value='" + index + "'>" + name + "</option>")
                    })
                });
                //7.校验电话号码
                    $("#telephone").blur(function(){
                    var telephoneVal =    $("#telephone").val();
                
                    if(!(/^1[34578]\d{9}$/.test(telephoneVal))){
                        $("#telephoneInfo").html("<font style='color: red;'>手机号格式不正确!</font>");
                    }else{
                        $("#telephoneInfo").html("");
                    }
                    });
                    //8.邮箱校验 使用html5自带的就行
                    //9.身份证号码正确性校验
                    $("#PersonID").blur(function(){
                    var personid =    $("#PersonID").val();
                    if(!/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(personid)){
                        $("#PersonIDInfo").html("<font style='color: red;'>身份证格式错误!</font>");
                    }else{
                        $("#PersonIDInfo").html("");
                    }
                    });
                    

            });
        </script>
    </head>

    <body>
        <form action="#" method="post">
            <table align="center" border="0px">
                <caption>注册页面</caption>
                <!--1.账号-->
                <tr>
                    <td align="right">账号:</td>
                    <td>
                        <input type="text" name="loginID" id="loginID" /> <span id="loginInfo"></span>
                    </td>
                </tr>
                <!-- 2.密码 -->
                <tr>
                    <td align="right">密码:</td>
                    <td>
                        <input type="password" name="pwd" id="pwd" /><span id="pwdInfo"></span>
                    </td>
                </tr>
                <!--3.确认密码-->
                <tr>
                    <td>确认密码:</td>
                    <td>
                        <input type="password" name="rpwd" id="rpwd" /><span id="rpwdInfo"></span>
                    </td>
                </tr>
                <!-- 4.姓名-->
                <tr>
                    <td align="right">姓名:</td>
                    <td>
                        <input type="text" name="name" id="name" required="required" />
                    </td>
                </tr>
                <!-- 5.年龄-->
                <tr>
                    <td align="right">年龄:</td>
                    <td>
                        <input type="text" name="age" id="age" /><span id="ageInfo"></span>
                    </td>
                </tr>
                <!--6.性别-->
                <tr>
                    <td align="right">性别:</td>
                    <td>
                        <input type="radio" name="sex" value="0" checked="checked" />男
                        <input type="radio" name="sex" value="1" />女
                    </td>
                </tr>
                <!--    7.爱好-->
                <tr>
                    <td align="right">爱好:</td>
                    <td>
                        <input type="checkbox" name="habby" value="0" checked="checked" />阅读
                        <input type="checkbox" name="habby" value="1" />运动
                        <input type="checkbox" name="habby" value="2" />玩游戏
                        <input type="checkbox" name="habby" value="3" />爬山
                    </td>

                </tr>
                <!--8.籍贯-->
                <tr>
                    <td align="right">籍贯:</td>
                    <td>
                        <select id="provice">
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">深圳</option>
                        </select>
                        <select id="city">

                        </select>
                    </td>
                </tr>
                <!--9.电话-->
                <tr>
                    <td align="right">电话:</td>
                    <td>
                        <input type="text" name="telephone" id="telephone" required="required"/><span id="telephoneInfo"></span>
                    </td>
                </tr>
                <!--10.出生年月-->
                <tr>
                    <td align="right">出生年月:</td>
                    <td>
                        <input type="date" name="date" id="date" />
                    </td>
                </tr>
                <!--11.个人近照-->
                <tr>
                    <td align="right">个人近照:</td>
                    <td>
                        <input type="file" name="photo" id="photo" />
                    </td>
                </tr>
                <!--12.邮箱-->
                <tr>
                    <td align="right">邮箱:</td>
                    <td>
                        <input type="email" name="email" id="email"  required="required"/>
                    </td>
                </tr>
                <!--13.工作年限-->
                <tr>
                    <td align="right">工作年限:</td>
                    <td>
                        <select name="worktime">
                            <option value="0" selected="selected">无</option>
                            <option value="1">1--3</option>
                            <option value="2">3--5</option>
                            <option value="3">5年以上</option>
                        </select>
                    </td>
                </tr>
                <!--14.身份证号码-->
                <tr>
                    <td align="right">身份证:</td>
                    <td>
                        <input type="text" name="PersonID" id="PersonID" /><span id="PersonIDInfo"></span>
                    </td>
                </tr>
                <!--15.重置  提交-->
                <tr>
                    <td align="right">重置:</td>
                    <td>
                        <input type="reset" />
                    </td>

                    <td>
                        <button>提交</button>
                    </td>
                </tr>
            </table>
        </form>
    </body>

</html>

共有 人打赏支持
粉丝 2
博文 47
码字总数 16468
×
springAndMybaties
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: