文档章节

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
粉丝 8
博文 199
码字总数 69333
作品 0
美国
私信 提问
JavaWeb05-HTML篇笔记(一)

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

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

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

木然
2013/07/22
990
0
minggeJS 1.9.5 更新,MingGeJS决战JQ有图有真相

先介绍一下Mingge1.9.5的更新概况 1:继续加强 创建节点 接口,新增多类型数据传入 。 2:新增 prepend appendTo prependTo before after ,完全和JQ一一模一样,,而且带事件克隆效果,这些...

明哥先生
2016/02/25
2.1K
23
Html5 学习系列(三)增强型表单标签

引言 在之前的HTML表单标签中,对于一些功能支持的不够好,比如:文本框提示信息(之前只能通过js和input的事件结合处理)、表单校验、日期选择控件、颜色选择控件、范围控件、进度条、标签跨...

aicoder
2012/05/27
0
0
jQuery学习笔记(二)

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

weixin_36171533
2017/12/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

day150-2018-11-17-英语流利阅读-待学习

歪果仁也疯狂:海外版抖音的征途 毛西 2018-11-17 1.今日导读 海外版抖音 TikTok 于 2017 年 5 月上线海外,至今覆盖全球 150 多个国家和地区,月活跃用户数已突破 5 亿。然而,“出海”的抖...

飞鱼说编程
今天
9
0
分布式学习最佳实践:从分布式系统的特征开始(附思维导图)

什么是分布式系统 回到顶部   分布式系统是由一组通过网络进行通信、为了完成共同的任务而协调工作的计算机节点组成的系统。分布式系统的出现是为了用廉价的、普通的机器完成单个计算机无法...

dragon_tech
今天
4
0
TOKEN设计

TOKEN设计 Api_Token 首先需要知道API是什么? API(Application Programming Interface)即应用程序接口。你可以认为 API 是一个软件组件或是一个 Web 服务与外界进行的交互的接口。而我们在...

DrChenXX
今天
3
0
浅谈“李氏代换”——从纪念金庸和斯坦李说起

李氏代换(LSP)简介 李氏代换是软件设计的一个原则,又名依赖倒转原则或依赖倒置原则,其衍生原则有接口分离原则等。该原则由Barbara Liskov于1988年提出。 该原则指出,程序中高级别的元素...

SamYjy
今天
36
0
JavaScript实现在线websocket WSS测试工具 -toolfk程序员工具网

本文要推荐的[ToolFk]是一款程序员经常使用的线上免费测试工具箱,ToolFk 特色是专注于程序员日常的开发工具,不用安装任何软件,只要把内容贴上按一个执行按钮,就能获取到想要的内容结果。T...

toolfk
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部