文档章节

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

Lucky_Me
 Lucky_Me
发布于 2017/09/10 14:31
字数 1272
阅读 18
收藏 0
点赞 0
评论 0

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
粉丝 6
博文 157
码字总数 46317
作品 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
jQuery学习笔记(二)

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

weixin_36171533
2017/12/03
0
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
爱上MVC3系列~当Ajax.Beform不能满足我们的要求时...

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

mcy247
2017/12/06
0
0
Html5 学习系列(三)增强型表单标签

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

aicoder
2012/05/27
0
0
JFinal中使用before(Validator.class)的时候,如果我用JQ进行form提交的时候,校验错误提示不能显示在页面上

@JFinal 用JQ进行form提交,我在FireBUG中看到,响应的代码中是有校验不通过的信息的,但是在前台页面没有显示,具体如图 ====================== 想明白了,回调的时候,在Validator中使用到的set...

tonysb
2016/05/07
112
0
中后台产品的表单设计(附原型规范)

前言 表单是数据录入和信息提交的通用形式,web端和移动端都很常见,通常由标签、输入项、提交按钮等多种元素构成。 中后台产品是服务于业务的。由于业务的复杂性,表单往往呈现出字段多、类...

NET快速开发框架
03/21
0
0
js表单验证的问题,jquery.validate问题

js进行表单验证 目前我们使用的是jq的validate插件 但是该插件遇到了一个问题 在验证类似于 name="user[]"的这个重复表单 就是一个表单中有多个名字为user[]的input输入框 这种表单 只需要输...

1514582970
2016/03/22
99
0
jQuery使用serialize(),serializeArray()方法取得表单数据

原始form表单值获取方式(手动): $.ajax({ type: "POST", url: "ajax.php", data: "Name=摘取天上星&position=IT技术", success: function(msg){alert(msg);}, error: function(error){aler......

未来守护者
2015/10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

看看 LinkedList Java 9

终于迎来了 LinkedList 类,实现的接口就有点多了 Serializable, Cloneable, Iterable<E>, Collection<E>, Deque<E>, List<E>, Queue<E>。LinkedList是一个实现了List接口和Deque接口的双端链......

woshixin
18分钟前
0
0
算法 - 冒泡排序 C++

大家好,我是ChungZH。今天我给大家讲一下最基础的排序算法:冒泡排序(BubbleSort)。 冒泡排序算法的原理如下: 比较相邻的元素。如果第一个比第二个大(可以相反),就交换他们两个。 对每...

ChungZH
21分钟前
0
0
jquery ajax request payload和fromData请求方式

请求头的不同 fromData var data = { name : 'yiifaa'};// 提交数据$.ajax('app/', { method:'POST', // 将数据编码为表单模式 contentType:'application/x-ww...

lsy999
23分钟前
0
0
阿里P7架构师,带你点亮程序员蜕变之路

前言: Java是现阶段中国互联网公司中,覆盖度最广的研发语言。 掌握了Java技术体系,不管在成熟的大公司,快速发展的公司,还是创业阶段的公司,都能有立足之地。 有不少朋友问,成为Java架...

Java大蜗牛
24分钟前
1
0
Ecstore 在没有后台管理界面(维护)的情况如何更新表的字段

window 系统: 切换到:app\base 目录下: C:\Users\qimh>d: D:\>cd D:\WWW\huaqh\app\base 执行:D:\WWW\huaqh\app\base>cmd update linux 系统: 1># cd /alidata/www.novoeshop.com/app/......

qimh
29分钟前
0
0
设计模式-策略模式

策略模式 解释 对工厂模式的再次封装,使用参数控制上下文信息(将工厂返回的实例赋值给context field) 不会返回bean实例,只是设置对应的条件 调用context的方法(调用field的方法) 用户只...

郭里奥
32分钟前
0
0
python使用有序字典

python自带的collections包中有很多有用的数据结构可供使用,其中有个叫OrderedDict类,它可以在使用的时候记录元素插入顺序,在遍历使用的时候就可以按照原顺序遍历。 a = {"a":1,"b"...

芝麻糖人
今天
0
0
RestTemplate HttpMessageConverter

RestTemplate 微信接口 text/plain HttpMessageConverter

微小宝
今天
0
0
mysql视图/存储过程/函数/事件/触发器

--语法参考:https://dev.mysql.com/doc/ (当前用的是5.6) https://dev.mysql.com/doc/refman/5.6/en/sql-syntax-data-manipulation.html --视图 CREATE VIEW test.v AS SELECT * FROM t;......

坦途abc
今天
0
0
MySQL参数优化案例

环境介绍 硬件配置 cpu核心数 内存大小 磁盘空间 16核 256G 3T 软件环境 操作系统版本 mysql版本 表数目 单表行数 centos-7.4 mysql-5.7.22 128张表 2kw行 优化层级与指导思想 优化层级 MySQ...

小致dad
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部