技术频道

公众号推荐

微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

[jQuery学习系列五 ]5-Jquery学习五-表单验证

时间：2019-02-14分类：jQuery作者：编程之家

前言最近总是有一个感觉，虽然这些东西都自己学习并一个案例一个案例的去验证过了。但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用，哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来，下面开始到jQuery的表单验证。

一，字段验证：1.1 字段非空

method= id =>

>姓名不能为空！

=>姓名： id = > value=>$(document).ready(function () {
$(<span style="color: #800000;">"<span style="color: #800000;">#error<span style="color: #800000;">").hide(); <span style="color: #008000;">//<span style="color: #008000;">隐藏报错信息
$(<span style="color: #800000;">"<span style="color: #800000;">#myform<span style="color: #800000;">").submit(function () {<span style="color: #008000;">//<span style="color: #008000;">提交按钮点击
<span style="color: #0000ff;">var data = $(<span style="color: #800000;">"<span style="color: #800000;">#name<span style="color: #800000;">"<span style="color: #000000;">).val();
<span style="color: #0000ff;">var len =<span style="color: #000000;"> data.length;
<span style="color: #0000ff;">if (len < <span style="color: #800080;">1<span style="color: #000000;">) {
$(<span style="color: #800000;">"<span style="color: #800000;">#error<span style="color: #800000;">").show(); <span style="color: #008000;">//<span style="color: #008000;">显示错误提示文本
<span style="color: #0000ff;">return <span style="color: #0000ff;">false<span style="color: #000000;">;
} <span style="color: #0000ff;">else<span style="color: #000000;"> {
$(<span style="color: #800000;">"<span style="color: #800000;">#error<span style="color: #800000;">"<span style="color: #000000;">).hide();
<span style="color: #0000ff;">return <span style="color: #0000ff;">true<span style="color: #000000;">;
}
});

$(</span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;#name</span><span style="color: #800000;"&gt;"</span>).focus(function(<span style="color: #0000ff;"&gt;event</span><span style="color: #000000;"&gt;) {
    $(</span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;p</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;).hide();
});

});

1.2 验证数字

method= id =>

>请输入数字！

=>年龄： id = > value=>

<span style="color: #008000;">//<span style="color: #008000;">方式一：利用键盘事件和鼠标事件限定只能输入数字
<span style="color: #008000;">//<span style="color: #008000;">只能输入数字，不包含小数点
<div <span style="color: #0000ff;">class=<span style="color: #800000;">"<span style="color: #800000;">line<span style="color: #800000;">">红包个数：<input type=<span style="color: #800000;">"<span style="color: #800000;">text<span style="color: #800000;">" name=<span style="color: #800000;">"<span style="color: #800000;">packetNumber<span style="color: #800000;">" value=<span style="color: #800000;">"<span style="color: #800000;">5<span style="color: #800000;">" onkeyup=<span style="color: #800000;">"<span style="color: #800000;">this.value=this.value.replace(/\D/g,'')<span style="color: #800000;">" onafterpaste=<span style="color: #800000;">"<span style="color: #800000;">this.value=this.value.replace(/\D/g,'')<span style="color: #800000;">" maxlength=<span style="color: #800000;">"<span style="color: #800000;">10<span style="color: #800000;">">个

<span style="color: #008000;">//<span style="color: #008000;">可以输入数字和小数点
<div <span style="color: #0000ff;">class=<span style="color: #800000;">"<span style="color: #800000;">line<span style="color: #800000;">">总&ensp;金&ensp;额：<input type=<span style="color: #800000;">"<span style="color: #800000;">text<span style="color: #800000;">" name=<span style="color: #800000;">"<span style="color: #800000;">money<span style="color: #800000;">" value=<span style="color: #800000;">"<span style="color: #800000;">5<span style="color: #800000;">" onkeyup=<span style="color: #800000;">"<span style="color: #800000;">if(isNaN(value))execCommand('undo')<span style="color: #800000;">" onafterpaste=<span style="color: #800000;">"<span style="color: #800000;">if(isNaN(value))execCommand('undo')<span style="color: #800000;">" maxlength=<span style="color: #800000;">"<span style="color: #800000;">10<span style="color: #800000;">">元

<span style="color: #008000;">//<span style="color: #008000;">方式二：利用isNaN函数
<span style="color: #000000;">$(document).ready(function () {
$(<span style="color: #800000;">"<span style="color: #800000;">#error<span style="color: #800000;">").hide(); <span style="color: #008000;">//<span style="color: #008000;">隐藏报错信息
$(<span style="color: #800000;">"<span style="color: #800000;">#myform<span style="color: #800000;">").submit(function () {<span style="color: #008000;">//<span style="color: #008000;">提交按钮点击
<span style="color: #0000ff;">var data = $(<span style="color: #800000;">"<span style="color: #800000;">#name<span style="color: #800000;">"<span style="color: #000000;">).val();
<span style="color: #0000ff;">if<span style="color: #000000;"> (isNaN(data)) {
$(<span style="color: #800000;">"<span style="color: #800000;">#error<span style="color: #800000;">").show(); <span style="color: #008000;">//<span style="color: #008000;">显示错误提示文本
<span style="color: #0000ff;">event.preventDefault(); <span style="color: #008000;">//<span style="color: #008000;">取消事件的默认动作。阻止提交
} <span style="color: #0000ff;">else<span style="color: #000000;"> {
$(<span style="color: #800000;">"<span style="color: #800000;">#error<span style="color: #800000;">"<span style="color: #000000;">).hide();
}
});
});

二，jQuery中的正则表达式var checkNum = /^[A-Za-z0-9]+$/;checkNum.test($(this).val());

网上已经有很多的关于这方面的例子，具体的我也不一一罗列了，用到了就可以直接百度。

三，多选框验证

method= action=> Box id= name=> id= value=> id= value=> id= value=> id= value=> id= value=>
Box name=Box value=Box1>Box1 Box name=Box value=Box2>Box2 Box name=Box value=Box3>Box3 Box name=Box value=Box4>Box4 Box name=Box value=Box5>Box5 Box name=Box value=Box6>Box6 Box name=Box value=Box7>Box7 Box name=Box value=Box8>Box8 $(<span style="color: #800000;">"<span style="color: #800000;">document<span style="color: #800000;">"<span style="color: #000000;">).ready(function(){
$(<span style="color: #800000;">"<span style="color: #800000;">#all<span style="color: #800000;">"<span style="color: #000000;">).click(function(){
<span style="color: #0000ff;">if(<span style="color: #0000ff;">this.<span style="color: #0000ff;">checked<span style="color: #000000;">){
$(<span style="color: #800000;">"<span style="color: #800000;">input[name='checkBox']<span style="color: #800000;">").each(function(){<span style="color: #0000ff;">this.<span style="color: #0000ff;">checked=<span style="color: #0000ff;">true<span style="color: #000000;">;});
$(<span style="color: #800000;">"<span style="color: #800000;">#btn1<span style="color: #800000;">").attr(<span style="color: #800000;">"<span style="color: #800000;">value<span style="color: #800000;">",<span style="color: #800000;">"<span style="color: #800000;">反选<span style="color: #800000;">"<span style="color: #000000;">);
}<span style="color: #0000ff;">else<span style="color: #000000;">{
$(<span style="color: #800000;">"<span style="color: #800000;">input[name='checkBox']<span style="color: #800000;">").each(function(){<span style="color: #0000ff;">this.<span style="color: #0000ff;">checked=<span style="color: #0000ff;">false<span style="color: #000000;">;});
$(<span style="color: #800000;">"<span style="color: #800000;">#btn1<span style="color: #800000;">").attr(<span style="color: #800000;">"<span style="color: #800000;">value<span style="color: #800000;">",<span style="color: #800000;">"<span style="color: #800000;">全选<span style="color: #800000;">"<span style="color: #000000;">);
}
});

$(<span style="color: #800000;">"<span style="color: #800000;">#btn1<span style="color: #800000;">"<span style="color: #000000;">).click(function(){
$(<span style="color: #800000;">"<span style="color: #800000;">[name='checkBox']<span style="color: #800000;">").attr(<span style="color: #800000;">"<span style="color: #800000;">checked<span style="color: #800000;">",<span style="color: #800000;">'<span style="color: #800000;">true<span style="color: #800000;">');<span style="color: #008000;">//<span style="color: #008000;">全选
<span style="color: #000000;">});

$(<span style="color: #800000;">"<span style="color: #800000;">#btn2<span style="color: #800000;">"<span style="color: #000000;">).click(function(){
$(<span style="color: #800000;">"<span style="color: #800000;">[name='checkBox']<span style="color: #800000;">").removeAttr(<span style="color: #800000;">"<span style="color: #800000;">checked<span style="color: #800000;">");<span style="color: #008000;">//<span style="color: #008000;">取消全选
<span style="color: #000000;">});

$(<span style="color: #800000;">"<span style="color: #800000;">#btn3<span style="color: #800000;">"<span style="color: #000000;">).click(function(){
$(<span style="color: #800000;">"<span style="color: #800000;">[name='checkBox']:even<span style="color: #800000;">").attr(<span style="color: #800000;">"<span style="color: #800000;">checked<span style="color: #800000;">",<span style="color: #800000;">'<span style="color: #800000;">true<span style="color: #800000;">');<span style="color: #008000;">//<span style="color: #008000;">选中所有奇数
<span style="color: #000000;">});

$(<span style="color: #800000;">"<span style="color: #800000;">#btn4<span style="color: #800000;">"<span style="color: #000000;">).click(function(){
$(<span style="color: #800000;">"<span style="color: #800000;">[name='checkBox']<span style="color: #800000;">"<span style="color: #000000;">).each(function(){
<span style="color: #0000ff;">if($(<span style="color: #0000ff;">this).attr(<span style="color: #800000;">"<span style="color: #800000;">checked<span style="color: #800000;">"<span style="color: #000000;">))
{
$(<span style="color: #0000ff;">this).removeAttr(<span style="color: #800000;">"<span style="color: #800000;">checked<span style="color: #800000;">"<span style="color: #000000;">);
}<span style="color: #0000ff;">else<span style="color: #000000;">{
$(<span style="color: #0000ff;">this).attr(<span style="color: #800000;">"<span style="color: #800000;">checked<span style="color: #800000;">",<span style="color: #800000;">'<span style="color: #800000;">true<span style="color: #800000;">'<span style="color: #000000;">);
}
});
});

$(<span style="color: #800000;">"<span style="color: #800000;">#btn5<span style="color: #800000;">"<span style="color: #000000;">).click(function(){
<span style="color: #0000ff;">var str=<span style="color: #800000;">""<span style="color: #000000;">;
<span style="color: #008000;">//<span style="color: #008000;">$("input:checkBox[name='checkBox']:checked").each(function(){<span style="color: #008000;">//<span style="color: #008000;">可以
$(<span style="color: #800000;">"<span style="color: #800000;">[name='checkBox'][checked]<span style="color: #800000;">"<span style="color: #000000;">).each(function(){
str+=$(<span style="color: #0000ff;">this).val()+<span style="color: #800000;">"<span style="color: #800000;">\r\n<span style="color: #800000;">"<span style="color: #000000;">;
});
alert(str);
});
});

效果如下图:

内容仍然需要不断的去完善!

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

上一篇：[jQuery学习系列四 ]4-Jquery学习四下一篇：[jQuery学习系列六]6-jQuery实际操

相关推荐

jquery页面搜索关键词突出显示

页面搜索关键词突出 // 页面搜索关键词突出 $(function () { $(".list_r").find('span').css({ // 每次搜索开始，先把所有字体颜色恢复初始状态 'color': "#838792"

作者：今♀妃惜彼时间：2024-09-23

jQuery实时显示日期、时间

jQuery实时显示日期、时间 html: <span id="time"></span> js: <script src="Js/jquery.min.js"></script> <%--引用jQuery

作者：今♀妃惜彼时间：2024-09-23

jQuery 添加水印

jQuery 添加水印 <script src="../../../../AJs/jquery.min.js"></script> <script type="text/javascript"> $(document).re

作者：今♀妃惜彼时间：2024-09-23

Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息

中文：Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息，之所以出现此错误，常见的原因是：通过调用Response.Write()修改相应时，将启用响应筛选器、HttpModules或服务器追踪。详细信息：分析附近的“输

作者：今♀妃惜彼时间：2024-09-23

Asp.net 后台调用js方法

1. 用Response.Write方法代码如下： Response.Write("<script type='text/javascript'>alert("XXX");</script>"); 此方只能调用内部函数

作者：今♀妃惜彼时间：2024-09-23

Jquery实现按钮点击遮罩加载，处理完后恢复

Jquery实现按钮点击遮罩加载，处理完后恢复思路： 1.点击按钮调用OnClientClick事件，添加dom元素及样式。 2.当Click中逻辑执行完后，在Click中调用js方法删除掉刚才添加的dom元素。 1 <%@ Page Language="C#" Auto

作者：今♀妃惜彼时间：2024-09-23

.Net后台调用js，提示、打开新窗体、关闭当前窗体

.Net后台调用js，提示、关闭当前窗体、打开新窗体 Response.Write("<script>window.alert('支付成功!');window.open('/JkCommerce/" + href + "',&

作者：今♀妃惜彼时间：2024-09-23

.net 搜索联想词

思路： 1.ajax请求后台方法获取数据。 2.通过jquery将请求到的数据显示在页面上。前台 <div class="sc_con" id="bbsearch"> <input type="text" class=&

作者：今♀妃惜彼时间：2024-09-23

JS点击子元素不触发父元素点击事件(js阻止冒泡)

<html> <title></title> <head> <meta charset="utf-8"> <style type="text/css"> .divone{width:100

作者：今♀妃惜彼时间：2024-09-23

jQuery表单验证提交：前台验证一

jQuery表单验证提交：前台验证一（图文+视频）

作者：编程之家时间：2023-09-13

小编推荐

苹果市值2025年有望达4万亿美元