jQuery学习笔记（五）jQuery事件，表单验证插件（validate）

最新推荐文章于 2024-01-26 10:05:23 发布
最新推荐文章于 2024-01-26 10:05:23 发布
阅读量2.8k 收藏 112
点赞数 9
分类专栏： Web前端 《前端学习》 文章标签： jQuery事件 jquery 表单验证插 插件validate
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sswqzx/article/details/82848048
版权

学习目标

jquery事件

表单验证插件

一、jQuery事件

1、概述

           jQuery 事件处理方法是 jQuery 中的核心函数。我们之前使用元素对象直接绑定事件的方式进行开发，但这样的缺点是，当该元素对象身上的事件使用完成后如果想解除该事件是不可以的，所以下面我学习事件的另一种绑定方式。

方法描述
bind()向匹配元素附加一个或更多事件处理器
blur()触发、或将函数绑定到指定元素的 blur 事件
change()触发、或将函数绑定到指定元素的 change 事件
click()触发、或将函数绑定到指定元素的 click 事件
dblclick()触发、或将函数绑定到指定元素的 double click 事件
delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()移除所有通过 live() 函数添加的事件处理程序。
error()触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()返回 event 对象上是否调用了 event.preventDefault()。
event.pageX相对于文档左边缘的鼠标位置。
event.pageY相对于文档上边缘的鼠标位置。
event.preventDefault()阻止事件的默认动作。
event.result包含由被指定事件触发的事件处理器返回的最后一个值。
event.target触发该事件的 DOM 元素。
event.timeStamp该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type描述事件的类型。
event.which指示按了哪个键或按钮。
focus()触发、或将函数绑定到指定元素的 focus 事件
keydown()触发、或将函数绑定到指定元素的 key down 事件
keypress()触发、或将函数绑定到指定元素的 key press 事件
keyup()触发、或将函数绑定到指定元素的 key up 事件
live()为当前或未来的匹配元素添加一个或多个事件处理器
load()触发、或将函数绑定到指定元素的 load 事件
mousedown()触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()触发、或将函数绑定到指定元素的 mouse up 事件
one()向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()文档就绪事件（当 HTML 文档就绪可用时）
resize()触发、或将函数绑定到指定元素的 resize 事件
scroll()触发、或将函数绑定到指定元素的 scroll 事件
select()触发、或将函数绑定到指定元素的 select 事件
submit()触发、或将函数绑定到指定元素的 submit 事件
toggle()绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
trigger()所有匹配元素的指定事件
triggerHandler()第一个被匹配元素的指定事件
unbind()从匹配元素移除一个被添加的事件处理器
undelegate()从匹配元素移除一个被添加的事件处理器，现在或将来
unload()触发、或将函数绑定到指定元素的 unload 事件

重要的如下图：

2、事件的绑定

html代码：

<body>
    <input type="button" value="Click">
</body>

js代码：

行内式js代码：
<input type="button" value="Click" onclick="btnClick();">

<script>
    function btnClick() {
        alert("按钮被点击了...");
    }
</script>

内嵌式js代码：
<input type="button" value="Click">

<script>
    // 页面入口函数
    $(function () {
        // jquery 方法绑定事件 :
        $("input").click(function () {
            alert("按钮被点击了...");
        });
    });
</script>

绑定一个事件：

Jq对象.bind("事件类型"，响应函数);

jquery代码：

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {

        // bind()
        // 绑定单个事件
        $("input").bind("click", function () {
            alert("按钮被点击了...");
        });

        // unbind()
        // 括号里面不写参数，代表解绑所有事件
        $("input").unbind("click");

    });
</script>

 

绑定多个事件：

Jq对象.bind({事件类型1:function(){},事件类型2:function(){}});

jquery代码：

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {

        // bind()
        // 绑定多个事件
        $("input").bind({
            "click": function () {
                alert("按钮被点击了...");
            },
            "mouseover": function () {
                alert("鼠标移入...");
            },
            "mouseout": function () {
                alert("鼠标移出...");
            }
        });

        // unbind()
        // 括号里面不写参数，代表解绑所有事件
        $("input").unbind("click");

    });
</script>

3、事件的解绑

解绑所有事件：

Jq对象.unbind();

解绑指定事件：

Jq对象.unbind("click");
$("input").unbind();
$("input").unbind("click");

 

4、事件切换

hover(over,out) == mouseover+mouseout

格式：

Jq对象.hover(function(){
//等同于mouseover事件，鼠标移入会执行
},function(){
//等同于mouseout事件，鼠标移出会执行
})

jquery代码：

// hover(function(){mouseover},function(){mouseout});
$("input").hover(function () {
    // mouseover 事件
    alert("鼠标移入...");
}, function () {
    // mouseout 事件
    alert("鼠标移出...");
});

格式：

Jq对象.hover(function(){
//只写一个匿名函数，代表鼠标移入和移出分别执行一次这里的js语句
})

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {

        // 只写一个function，代表移入和移出都会执行一次里面的语句
        // hover(function(){mouseover，mouseout});
        $("input").hover(function () {
            alert("鼠标移动了...");
        });
    });
</script>

 

5、案例-左右选择

5.1、说明：

如下图、选 中下拉A框中的选项1移动到下接B中。

1.	点击按钮 --> 让下拉框A中 选中的项 到下拉框B中，并且添加到最后
2.	点击按钮 ==> 让下拉框A中 所有的项 到下拉框B中 
3.	点击按钮 <-- 让下拉框B中 选中的项 到下拉框A中，并且添加到最后
4.	点击按钮 <== 让下拉框B中 所有的项 到下拉框A中

5.2、演示：

html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body {
            font-family: Courier;
            font-size: 12px;
            margin: 0px 0px 0px 0px;
            overflow-x: hidden;
            overflow-y: hidden;
            background-color: #B8D3F4;
        }
        td {
            font-size: 12px;
        }
        .td3 {
            background-color: #B8D3F4;
            text-align: center;
            line-height: 20px;
            width: 160px;
        }
        .tb td {
            font-size: 12px;
            border: 2px groove #ffffff;
        }
        .button {
            border: 1px ridge #ffffff;
            line-height: 18px;
            height: 20px;
            width: 45px;
            padding-top: 0px;
            background: #CBDAF7;
            color: #000000;
            font-size: 9pt;
            font-family: Courier;
        }
    </style>
</head>
<body>
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:450px; height:300px; background-color:#E6E6E6;">
    <table width="385" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
        <tr>
            <td width="126">
                <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
                <select id="_left" name="first" size="10" multiple="multiple" class="td3" id="first">
                    <option value="选项1">选项1</option>
                    <option value="选项2">选项2</option>
                    <option value="选项3">选项3</option>
                    <option value="选项4">选项4</option>
                    <option value="选项5">选项5</option>
                    <option value="选项6">选项6</option>
                    <option value="选项7">选项7</option>
                    <option value="选项8">选项8</option>
                </select>
            </td>
            <td width="89" valign="middle" align="center">
                <input name="add" id="add" type="button" class="button" value="-->" />
                <input name="add_all" id="add_all" type="button" class="button" value="==>" />
                <input name="remove" id="remove" type="button" class="button" value="&lt;--" />
                <input name="remove_all" id="remove_all" type="button" class="button" value="&lt;==" />
            </td>
            <td width="127" align="left">
                <select id="_right" name="second" size="10" multiple="multiple" class="td3" id="second">
                    <option value="选项9">选项9</option>
                </select>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

jquery代码：

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    $(function () {

        // 说明 : 获取所有的 input 标签按钮
        var inputs = $("input");

        // 将左侧当前选中的添加到右侧
        // 1. 给第一个 input 标签按钮绑定单击事件
        inputs.eq(0).click(function () {
            // 2. 将左边所有选中的 option 选项框, 拼接到右边.
            $("#_left option:selected").appendTo($("#_right"));
        });

        // 将左侧全部添加到右侧
        inputs.eq(1).click(function () {
            $("#_left option").appendTo($("#_right"));
        });

        // 将右侧当前选中的添加到左侧
        inputs.eq(2).click(function () {
            $("#_right option:selected").appendTo($("#_left"));
        });

        // 将右侧全部添加到左侧
        inputs.eq(3).click(function () {
            $("#_right option").appendTo($("#_left"));
        });
    });
</script>

 

二、表单验证插件

1、说明：

插件：实现了某些特定功能的组件。

框架：是一个集合体，里面不仅仅有功能。

插件一共分为两类，一类是基于js的插件，一类是基于jquery的插件。

唯一的区别就是，基于jquery的插件在使用的时候一定要引jquery的包！

简介：jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。

2、下载

官网地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip

帮助文档位置：http://jqueryvalidation.org/documentation/

目录结构

默认校验规则：

序号规则描述
1required:true必须输入的字段。
2remote:"check.php"使用 ajax 方法调用 check.php 验证输入值。
3email:true必须输入正确格式的电子邮件。
4url:true必须输入正确格式的网址。
5date:true必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6dateISO:true必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7number:true必须输入合法的数字（负数，小数）。
8digits:true必须输入整数。
9creditcard:必须输入合法的信用卡号。
10equalTo:"#field"输入值必须和 #field 相同。
11accept:输入拥有合法后缀名的字符串（上传文件的后缀）。
12maxlength:5输入长度最多是 5 的字符串（汉字算一个字符）。
13minlength:10输入长度最小是 10 的字符串（汉字算一个字符）。
14rangelength:[5,10]输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15range:[5,10]输入值必须介于 5 和 10 之间。
16max:5输入值不能大于 5。
17min:10输入值不能小于 10。

3、演示

html代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>我的jquery表单校验页面</title>
    <style type="text/css">
        p{text-align: center;font-size:24px;}
        table{margin: 0 auto;border: 0;}
        table tr{height:40px;border:0;}
        table tr td{padding:0 14px;border:1px solid #999}
        .error{color:red;}
    </style>
</head>
<body>
<p>员工信息录入</p>
<form name="empForm" id="empForm" method="get" action="test.html" novalidate="novalidate">
    <table border="1">
        <tbody><tr>
            <td>真实姓名(不能为空 )</td>
            <td><input type="text" id="realname" name="realname">
            </td>
        </tr>
        <tr>
            <td>登录名(登录名不能为空,长度在5-8之间):</td>
            <td><input type="text" id="username" name="username"></td>
        </tr>
        <tr>
            <td>密码(不能为空,长度在6-12之间):</td>
            <td><input type="password" id="psw" name="psw"></td>
        </tr>
        <tr>
            <td>重复密码(不能为空,长度在6-12之间):</td>
            <td><input type="password" id="psw2" name="psw2"></td>
        </tr>
        <tr>
            <td>性别(必选其一)</td>
            <td>
                <input type="radio" id="gender_male" value="m" name="gender">&nbsp;男&nbsp;&nbsp;
                <input type="radio" id="gender_female" value="f" name="gender">&nbsp;女
                <label id="gender-error" class="error" for="gender"></label>
            </td>
        </tr>
        <tr>
            <td>年龄(必填26-50):</td>
            <td><input type="text" id="age" name="age"></td>
        </tr>
        <tr>
            <td>你的学历:</td>
            <td> <select name="edu" id="edu">
                <option value="">－请选择你的学历－</option>
                <option value="a">专科</option>
                <option value="b">本科</option>
                <option value="c">研究生</option>
                <option value="e">硕士</option>
                <option value="d">博士</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>出生日期(1982/09/21):</td>
            <td><input type="text" id="birthday" name="birthday" value=""></td>
        </tr>
        <tr>
            <td>兴趣爱好:</td>
            <td colspan="2">
                <input type="checkbox" name="checkbox1" id="qq1">&nbsp;乒乓球 &nbsp;
                <input type="checkbox" name="checkbox1" id="qq2" value="1">&nbsp;羽毛球 &nbsp;
                <input type="checkbox" name="checkbox1" id="qq3" value="2">&nbsp;上网 &nbsp;
                <input type="checkbox" name="checkbox1" id="qq4" value="3">&nbsp;旅游 &nbsp;
                <input type="checkbox" name="checkbox1" id="qq5" value="4">&nbsp;购物 &nbsp;
                <label id="checkbox1-error" class="error" for="checkbox1"></label>
            </td>
        </tr>
        <tr>
            <td align="left">电子邮箱:</td>
            <td><input type="text" id="email" name="email"></td>
        </tr>
        <tr>
            <td align="left">身份证(15-18):</td>
            <td><input type="text" id="card" name="card"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" name="firstname" id="firstname" value="保存"></td>
        </tr>
        </tbody></table>
</form>
</body>
</html>

jquery代码：

validate是jQuery插件，其必须在jQuery的基础上进行运行。我们将导入jquery库、validate库

<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/jquery.validate.min.js"></script>

校验模板：

<script>
    $(function () {
        $("form表单选择器").validate({
            rules: {
                表单项name值1: 校验规则, 
                表单项name值2: 校验规则
            },
            messages: {
                表单项name值1: 错误提示信息, 
                表单项name值2: 错误提示信息
            }
        });
    });
</script>

<!--导包-->
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/jquery.validate.min.js"></script>
<script>
    $(function () {
        $("#empForm").validate({
            rules: {
                realname: "required",
                username: {
                    required: true,
                    rangelength: [5,8]
                },
                psw: {
                    required: true,
                    rangelength: [6,12]
                },
                psw2: {
                    required: true,
                    equalTo: "#psw"
                },
                gender: "required",
                age: {
                    required: true,
                    range: [26,50]
                },
                edu: "required",
                birthday: {
                    required: true,
                    dateISO: true
                },
                checkbox1: "required",
                email: {
                    required: true,
                    email: true
                },
                card: "required"
            },
            messages: {
                realname: "请输入你的真实姓名",
                username: {
                    required: "请输入您的用户名",
                    rangelength: "用户名必须在{0}-{1}位之间"
                },
                psw: {
                    required: "请输入密码",
                    rangelength: "密码长度必须在{0}-{1}位之间."
                },
                psw2: {
                    required: "请再次输入密码",
                    equalTo: "两次密码保持一致"
                },
                gender: "请选择性别",
                age: {
                    required: "请输入您的年龄",
                    range: "年龄必须介于{0}-{1}数值之间"
                },
                edu: "请选择学历",
                birthday: {
                    required: "请输入你的生日",
                    dateISO: "生日格式不正确"
                },
                checkbox1: "请选择您的兴趣爱好",
                email: {
                    required: "请输入您的邮箱",
                    email: "邮箱格式不正确"
                },
                card: "请输入您的身份证号码"
            }
        });
    });
</script>

4、自定义校验规则

如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则：

格式：

$.validator.addMethod(name,method,message);
	参数1：name，校验规则的自定义名称。例如：aaa
	参数2：method，执行校验时使用的处理函数。返回true表示校验通过，返回false表示校验未通过。
		function(value,element,params){} ,处理函数被调用时，可以获得3个参数。
			参数value：表单项的value值。例如：<input value="">
			参数element：被校验的表单项对象。
			参数params：使用当前校验规则传递的值。例如：rules : { username : {required : true} }
                     只有为true才会开始校验
	参数3：message，校验未通过时的提示信息（可以不写，不写可以在messages里面配置）。
注意：自定义校验规则写完了之后，一定要在rules中开启！

自定义校验代码实现：

<!--导包-->
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/jquery.validate.min.js"></script>
<script>
    $(function () {
        // 自定义方法 :
        // $.validator.addMethod("方法名称", "匿名函数", "提示消息");
        $.validator.addMethod("cardLength", function (value, element, params) {
            // 使用 value 进行长度判断
            if (value.length == 15 || value.length == 18) {
                return true;
            }
        }, "身份证号码长度不正确.");

        $.validator.addMethod("cardFormat", function (value, element, params) {
            // 使用 value 进行长度判断
            if (value.length == 15) {
                // 说明 : 如果身份证号码为 15 位, 要求全部为 `数字`.
                var regex = /\d{15}/;
                if (regex.test(value)) {
                    return true;
                }
            }

            if (value.length == 18) {
                // 说明 : 如果身份证号码为 18 为, 有两种可能, 1. 全部为数字   2. 前17位为数字,最后一位为 [xX]
                var regex = /\d{18}|\d{17}[xX]/;
                if (regex.test(value)) {
                    return true;
                }
            }

        }, "身份证号码格式不正确.");


        // 开始校验 :
        $("#empForm").validate({
            rules: {
                realname: "required",
                username: {
                    required: true,
                    rangelength: [5,8]
                },
                psw: {
                    required: true,
                    rangelength: [6,12]
                },
                psw2: {
                    required: true,
                    equalTo: "#psw"
                },
                gender: "required",
                age: {
                    required: true,
                    range: [26,50]
                },
                edu: "required",
                birthday: {
                    required: true,
                    dateISO: true
                },
                checkbox1: "required",
                email: {
                    required: true,
                    email: true
                },
                card: {
                    required: true,
                    cardLength: true,
                    cardFormat: true
                }
            },
            messages: {
                realname: "请输入你的真实姓名",
                username: {
                    required: "请输入您的用户名",
                    rangelength: "用户名必须在{0}-{1}位之间"
                },
                psw: {
                    required: "请输入密码",
                    rangelength: "密码长度必须在{0}-{1}位之间."
                },
                psw2: {
                    required: "请再次输入密码",
                    equalTo: "两次密码保持一致"
                },
                gender: "请选择性别",
                age: {
                    required: "请输入您的年龄",
                    range: "年龄必须介于{0}-{1}数值之间"
                },
                edu: "请选择学历",
                birthday: {
                    required: "请输入你的生日",
                    dateISO: "生日格式不正确"
                },
                checkbox1: "请选择您的兴趣爱好",
                email: {
                    required: "请输入您的邮箱",
                    email: "邮箱格式不正确"
                },
                card: {
                    required: "请输入身份证号码",
                }
            }
        });
    });
</script>

sswqzx
关注
  • 9
    点赞
  • 踩
  • 112
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
jquery validate表单验证插件制作注册表单提交验证
10-30
jquery validate表单验证插件制作注册表单提交验证 jquery validate表单验证插件制作注册表单提交验证
submit 与jquery的validate关系
yuxuan89814的专栏
08-05 852
我是jquery的初学者，最近在做jqueryde
jQuery：validate中添加焦点事件、键盘事件
huang100qi的专栏
09-06 7257
在前不久，以下写法都还完全能起作用的： $("#back_login_form").validate({ onkeyup:true, onblur:true, onfocus:true, onkeydown:true, rules:{ ........ 可是，今天用Struts2+hibernate4+spring4+
jQuery Validate详解
最新发布
JBIB ENGINE
01-26 1165
rangelength: $.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
使用jQuery实现表单数据验证
qq_48666244的博客
12-07 3868
1、$('form :input')返回form中的所有表单对象，包括textarea、select、button等；$('form input')返回form中的所有input标签对象。2、form input是属于层级选择器（将每一个选择器匹配到的元素合并后一起返回）；form :input是属于表单选择器（匹配所有 input、textarea、select、button等）。triggerHandler()方法触发被选元素的指定事件类型。triggerHandler()方法与trigger()方
JQuery-表单验证
qq_49246775的博客
12-07 6232
GiWiFI页面验证登录()表单验证
功能强大的jquery.validate表单验证插件
01-19
本文实例为大家分享了jquery.validate表单验证的使用方法，供大家参考，具体内容如下 1 、表单验证的准备工作 在开启长篇大论之前，首先将表单验证的效果展示给大家。 1.点击表单项，显示帮助提示  2.鼠标离开表...
jQuery Validate表单验证插件实现代码
10-19
主要介绍了jQuery Validate表单验证插件实现代码,需要的朋友可以参考下
jQuery Validate插件实现表单验证
12-08
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来...
jQuery插件Validate实现自定义表单验证
10-22
主要介绍了jQuery插件Validate实现自定义表单验证，自定义一个验证方法，感兴趣的小伙伴们可以参考一下
jQuery 表单验证：简单而强大的表单验证方法
weixin_68250871的博客
05-23 575
【代码】jQuery 表单验证：简单而强大的表单验证方法。
JQuery 简单表单验证
爪白白的个人博客
05-20 1360
选择器 $("p") 选取<p>元素 $("p.intro") 选取class="intro" 的<p>元素 $("p#demo") 选取id="demo" 的<p>元素 $("div input") 选取div 下所有的input元素 $("p:first") 选取第一个段落 $("p:last") 选取最后一个段落 $("tr:even") 选择...
jQuery-05
weixin_65088316的博客
03-24 704
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入jQuery库 --> <style type="text/css"> #myForm label.error{ color:red; ...
jQuery实例之表单验证
二木成林
05-14 2239
使用jQuery实现表单验证： register.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <!--导入jQuery--> <script src="js/jquery-3.3.1.js"></script> <!--进行
jQuery-Validate验证插件的使用步骤详解
热门推荐
武哥聊编程
05-25 8万+
我们知道，用户在注册的时候，会有个表单页面，然后有些选项是必填的，有些要填的内容是有规范的，这些都要在用户提交之前进行验证才行，如果不符合要求，需要在右边显示一个友好的提示，让用户修改。 　　记得以前在学习Servlet的时候，实现一个简单的用户注册功能的验证是在后台做的，有些用了正则表达式，有些没用，但是都比较简单。流程是这样的，前台提交表单数据后，servlet获取数据
表单验证（jquery-validate）
zp的博客
11-23 2190
1.默认校验规则 属性 描述 required:true 必须输入的字段 remote:"/action" 使用ajax方法调用action验证输入值 email:true 必须输入正确格式的电子邮件 url:true 必须输入正确格式的网址 date:true 必须输入正确格式的日期。日期校验 ie6 出错，慎用 dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不.
Jquery 事件绑定---动态绑定和静态绑定
【程序员不弃】的博客
05-06 1348
Jquery 事件绑定---动态绑定和静态绑定1.静态元素绑定：方法一：$('#btn_submit').click(function(){ });方法二：直接在button标签中使用onclick绑定&lt;button type="submit" id="btn_submit" onclick="btnAction()"&gt; submit &lt;/button&gt;方法三：使用bi...
Jquery-validate表单验证插件的使用，了解表单验证的实现原理
04-19
我了解Jquery-validate表单验证插件的使用，它可以方便地对表单进行验证，包括必填项、正则表达式、长度、数字范围等，主要是通过JQuery 库的ajax方法来实现，向服务器提交数据，并根据返回结果进行验证，从而避免了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值