文档章节

40.使用JQ对表单进行全面校验

Lucky_Me
 Lucky_Me
发布于 2017/09/10 14:31
字数 1299
阅读 21
收藏 0
jq

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>

© 著作权归作者所有

共有 人打赏支持
Lucky_Me
粉丝 10
博文 210
码字总数 76634
作品 0
美国
私信 提问
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
2018/05/10
0
0
JQ工具集--J-LibTool

J-libtool是一款WEB前端开发 JQ工具集 提供BOX弹出层,ajax表单提交,input默认值,Cookie存取,前端验证码 等诸多功能. J-libtool 开发模式并非传统的jq插件方法,有自己独立的功能模块,如果...

木然
2013/07/22
990
0
keta-custom DWZ validationEng IE 下表单重复提交BUG原因及修复方法

BUG场景 : <form method="post" action="${contextPath }/management/security/scanTask/create" class="pageForm required-validate" onsubmit="return validateCallback(this, dialogAjax......

筱龙缘
2014/02/11
0
1
jQuery学习笔记(二)

jQ变成过程 1,引入jQ的js文件 2,使用选择器定位要操作的节点 调用jQ的方法进行操作 jQ对象 为了解决浏览器兼容问题而解决的提供一种统一封装后的对象描述 jq提供的方法都是jQ特有的,而且大...

weixin_36171533
2017/12/03
0
0
爱上MVC3系列~当Ajax.Beform不能满足我们的要求时...

mvc架构中提供了Html.BeginForm与Ajax.BeginForm,主要实现同步提交表单与异步提交表单,对于同步提交与传统的方式没有区别,而异步表单MVC自己进行了封装(可以看我的文章了解两种方式的表单...

mcy247
2017/12/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

百度黄埔学院将培养一批首席AI架构师,为“国之重器”赋能

深度学习高端人才不仅是AI发展的重要养分,也是企业转型AI巨大推动力。2019年1月19日,百度黄埔学院——深度学习架构师培养计划在百度科技园举行开学典礼,深度学习技术及应用国家工程实验室...

深度学习之桨
41分钟前
2
0
扒站wget仿站

wget -c -r -p -np -k http://xxx.com/xxx 其中: -c, --continue (断点续传) 接着下载没下载完的文件 -r, --recursive(递归) specify recursive download.(指定递归下载) -p, --page...

临江仙卜算子
43分钟前
2
0
Nextjs+React非页面组件SSR渲染

@随风溜达的向日葵 Nextjs Nextjs是React生态中非常受欢迎的SSR(server side render——服务端渲染)框架,只需要几个步骤就可以搭建一个支持SSR的工程(_Nextjs_的快速搭建见Next.js入门)...

随风溜达的向日葵
今天
3
0
如何在 Linux 系统查询机器最近重启时间

在你的 Linux 或类 UNIX 系统中,你是如何查询系统上次重新启动的日期和时间?怎样显示系统关机的日期和时间? last 命令不仅可以按照时间从近到远的顺序列出该会话的特定用户、终端和主机名...

来来来来来
今天
4
0
Redis协议是什么样的

前言 我们用过很多redis的客户端,有没有相过自己撸一个redis客户端? 其实很简单,基于socket,监听6379端口,解析数据就可以了。 redis协议 解析数据的过程主要依赖于redis的协议了。 我们...

春哥大魔王的博客
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部