[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 < ) {
$("#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="" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="">个</div>
//可以输入数字和小数点
<div class="line">总 金 额:<input type="text" name="money" value="" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')" maxlength="">元</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()+"\r\n";
});
alert(str);
});
});
效果如下图:
这个地方仍然还是存在一些问题的, 大家能够发现吗? 这里面的内容仍然需要不断的去完善!
[jQuery学习系列五 ]5-Jquery学习五-表单验证的更多相关文章
- 【js类库AngularJs】学习angularJs的指令(包括常见表单验证,隐藏等功能)
[js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...
- struts2官方 中文教程 系列十一:使用XML进行表单验证
在本教程中,我们将讨论如何使用Struts 2的XML验证方法来验证表单字段中用户的输入.在前面的教程中,我们讨论了在Action类中使用validate方法验证用户的输入.使用单独的XML验证文件让 ...
- bootstrap学习起步篇:初识bootstrap之表单验证(二)
学习bootstrap是个过程,它提供给我们的文档上有很详细的说明.包括常用的栅栏布局.页面元素等,这里就不啰嗦了,今天,我就来说下结合jquery的表单验证. 最开始不借助插件,我们需要自己去编写验 ...
- angular学习的一些小笔记(中)之表单验证
表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlen ...
- Django学习系列10:保存用户输入——编写表单,发送POST请求
要获取用户输入的待办事项,发送给服务器,这样才能使用某种方式保存待办事项,然后在显示给用户查看. 上次运行测试指出无法保存用户的输入.现在,要使用HTML post请求. 若想让浏览器发送POST请求 ...
- 五十四:WTForms表单验证之自定义表单验证器
如果想要对表单中的某个字段进行自定义验证,则需要对这个字段进行单独的验证1.定义一个方法,命名规则为:validate_字段名(self, filed)2.在方法中,使用filed.data获取字段的 ...
- 五十二:WTForms表单验证之基本使用
作用:1.做表单验证,把用户提交的数据验证是否合法2.做模板渲染 安装:pip install wtforms 表单验证1.自定义一个表单类,继承wtforms.Form2.定义好需要验证的字段,字段 ...
- angularjs学习第五天笔记(第二篇:表单验证升级篇)
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- jQuery笔记(五)jQuery表单验证
前言 上次我们说完jQuery中的动画之后,我们再来看一种jQuery在Web网页应用最为广泛的一种形式,这就是jQuery对表单的操作,通过jQuery对表单的操作,可以有效的提高用户体验.在此之前 ...
- 自定义表单验证--jquery validator addMethod的使用
原文地址:jquery validator addMethod 方法的使用作者:蜡笔小玄 jQuery.validate是一款非常不错的表单验证工具,简单易上手,而且能达到很好的体验效果,虽然说在项目 ...
随机推荐
- Python_sklearn机器学习库学习笔记(三)logistic regression(逻辑回归)
# 逻辑回归 ## 逻辑回归处理二元分类 %matplotlib inline import matplotlib.pyplot as plt #显示中文 from matplotlib.font_m ...
- java文件乱码
要让一个 Java 源文件打开时编码格式为 UTF-8,需要做2件事情:1)设置Java 源文件的默认编码格式为UTF-8:2)设置workspace的编码格式为UTF-8. 相应设置如下: 设置 J ...
- iOS 设置button文字过长而显示省略号的解决办法
UIButton * button =[UIButton buttonWithType:UIButtonTypeCustom];button.titleLabel.adjustsFontSizeToF ...
- 缓存大全(Memcached、redis、RabbitMQ )
Memcached: 简介.安装.使用 python操作Memcached Memcached天生支持集群 Redis: 简介.安装.使用.实例 Python操作Redis String.Hash.L ...
- javascript 按ctrl和enter键提交表单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 使用 IntraWeb (41) - 数据控件速查
TIWDBCheckBox 所在单元及继承链: IWDBStdCtrls.TIWDBCheckBox 主要成员: property AutoEditable: Boolean //根据 DataSou ...
- Win7中不能调试windows service
多年前玩过一次windows service,觉得挺简单的. 这次工作要维护产品中的windows service,发现不是那么简单,vs附加调试器的窗体中无法找到windows service进程. ...
- AIX 开机启动网络服务配置
aix7 administrator An administrator notices that the ntp group subsystem is not starting up at boot ...
- freeCodeCamp:Check for Palindromes
如果给定的字符串是回文,返回true,反之,返回false. 如果一个字符串忽略标点符号.大小写和空格,正着读和反着读一模一样,那么这个字符串就是palindrome(回文). 注意你需要去掉字符串多 ...
- noip2014-day1-t2
题目描述:无向连通图G 有n 个点,n - 1 条边.点从1 到n 依次编号,编号为 i 的点的权值为W i ,每条边的长度均为1 .图上两点( u , v ) 的距离定义为u 点到v 点的最短距离. ...