[jQuery学习系列五 ]5-Jquery学习五-表单验证
时间:2022-05-16
本文章向大家介绍[jQuery学习系列五 ]5-Jquery学习五-表单验证,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言 最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了。但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈). 所以每当学习或者复习相关的知识我都喜欢记录下来,下面开始到jQuery的表单验证。 这里的表单验证都是最简单最基础的方式去完成,当然jQuery还有一些比较好的验证框架,这里就不提及了。
一,字段验证: 1.1 字段非空
<form action="" method="post" id ="myform">
<p id="error">姓名不能为空!</p>
<table>
<tr>
<td><label for="name">姓名:</label></td>
<td><input type ="text" id = "name"></td>
</tr>
<tr>
<td><input type ="submit" value="提交"></td>
</tr>
</table>
</form>
$(document).ready(function () {
$("#error").hide(); //隐藏报错信息
$("#myform").submit(function () {//提交按钮点击
var data = $("#name").val();
var len = data.length;
if (len < 1) {
$("#error").show(); //显示错误提示文本
return false;
} else {
$("#error").hide();
return true;
}
});
$("#name").focus(function(event) {
$("p").hide();
});
});
1.2 验证数字
<form action="" method="post" id ="myform">
<p id="error">请输入数字!</p>
<table>
<tr>
<td><label for="age">年龄:</label></td>
<td><input type ="text" id = "age"></td>
</tr>
<tr>
<td><input type ="submit" value="提交"></td>
</tr>
</table>
</form>
//方式一:利用键盘事件和鼠标事件限定只能输入数字
//只能输入数字,不包含小数点
<div class="line">红包个数:<input type="text" name="packetNumber" value="5" onkeyup="this.value=this.value.replace(/D/g,'')" onafterpaste="this.value=this.value.replace(/D/g,'')" maxlength="10">个</div>
//可以输入数字和小数点
<div class="line">总 金 额:<input type="text" name="money" value="5" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')" maxlength="10">元</div>
//方式二:利用isNaN函数
$(document).ready(function () {
$("#error").hide(); //隐藏报错信息
$("#myform").submit(function () {//提交按钮点击
var data = $("#name").val();
if (isNaN(data)) {
$("#error").show(); //显示错误提示文本
event.preventDefault(); //取消事件的默认动作。阻止提交
} else {
$("#error").hide();
}
});
});
二,jQuery中的正则表达式 var checkNum = /^[A-Za-z0-9]+$/; checkNum.test($(this).val());
网上已经有很多的关于这方面的例子,具体的我也不一一罗列了,用到了 就可以直接百度。
三,多选框验证
<form name="form1" method="post" action="">
<input type="checkbox" id="all" name="all">
<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="取消全选">
<input type="button" id="btn3" value="选中所有奇数">
<input type="button" id="btn4" value="反选">
<input type="button" id="btn5" value="获得选中的所有值">
<br />
<input type="checkbox" name="checkbox" value="checkbox1">checkbox1
<input type="checkbox" name="checkbox" value="checkbox2">checkbox2
<input type="checkbox" name="checkbox" value="checkbox3">checkbox3
<input type="checkbox" name="checkbox" value="checkbox4">checkbox4
<input type="checkbox" name="checkbox" value="checkbox5">checkbox5
<input type="checkbox" name="checkbox" value="checkbox6">checkbox6
<input type="checkbox" name="checkbox" value="checkbox7">checkbox7
<input type="checkbox" name="checkbox" value="checkbox8">checkbox8
</form>
$("document").ready(function(){
$("#all").click(function(){
if(this.checked){
$("input[name='checkbox']").each(function(){this.checked=true;});
$("#btn1").attr("value","反选");
}else{
$("input[name='checkbox']").each(function(){this.checked=false;});
$("#btn1").attr("value","全选");
}
});
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');//全选
});
$("#btn2").click(function(){
$("[name='checkbox']").removeAttr("checked");//取消全选
});
$("#btn3").click(function(){
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
});
$("#btn4").click(function(){
$("[name='checkbox']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}else{
$(this).attr("checked",'true');
}
});
});
$("#btn5").click(function(){
var str="";
//$("input:checkbox[name='checkbox']:checked").each(function(){//可以
$("[name='checkbox'][checked]").each(function(){
str+=$(this).val()+"rn";
});
alert(str);
});
});
效果如下图:
这个地方仍然还是存在一些问题的, 大家能够发现吗? 这里面的内容仍然需要不断的去完善!
- 分布式事务 TCC-Transaction 源码解析 —— 事务存储器
- 注册中心 Eureka 源码解析 —— 调试环境搭建
- 一样的代码、不一样的写法,JavaScript必知的简写技巧|附源代码
- 【死磕Java并发】-----J.U.C之读写锁:ReentrantReadWriteLock
- 数据库中间件 MyCAT源码分析——跨库两表Join
- iOS一种动态栅格布局方案
- 消息队列中间件 RocketMQ 源码分析 —— Message 存储
- 数据库中间件 MyCAT 源码解析 —— 分片结果合并(一)
- 数据库分库分表中间件 Sharding-JDBC 源码分析 —— SQL 路由(一)之分库分表配置
- 数据库分库分表中间件 Sharding-JDBC 源码分析 —— SQL 解析(六)之删除SQL
- 数据库[分库分表]中间件 Sharding-JDBC 源码分析 —— SQL 解析(五)之更新SQL解析
- ExtJs+WCF+LINQ实现分页Grid
- 数据库[分库分表]中间件 Sharding-JDBC 源码分析 —— SQL 解析(四)之插入SQL
- 基于sliverlight + wcf的web 文字版IM 示例
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法