jQuery表单验证的几种方法
1.jQuery的框架的验证：validate框架
Jquery Validate 验证规则
(1)required:true 必输字段
(2)remote:”check.PHP” 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:”#field” 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
Jquery Validate 自定义验证规则
addMethod(name,method,message)方法：
参数name 是添加的方法的名字
参数method是一个函数,接收三个参数(value,element,param) value 是元素的值,element是元素本身 param
是参数,我们可以用addMethod 来添加除built-in Validation methods 之外的验证方法比如有一个字段,只
能输一个字母,范围是a-f,写法如下:
$.validator.addMethod(“af”,function(value,element,params){
if(value.length>1){
return false;
}
if(value>=params[0] && value<=params[1]){
return true;
}else{
return false;
}
},”必须是一个字母,且a-f”);
用的时候,比如有个表单字段的id=”username”,则在rules 中写
username:{
af:["a","f"]
}
方法
addMethod 的第一个参数,就是添加的验证方法的名子,这时是af
addMethod 的第三个参数,就是自定义的错误提示,这里的提示为:”必须是一个字母,且a-f”
addMethod 的第二个参数,是一个函数,这个比较重要,决定了用这个验证方法时的写法
如果只有一个参数,直接写,如果af:”a”,那么a 就是这个唯一的参数,如果多个参数,用在[]里,用逗号分开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.error{
color: red;
}
</style> <script src="js/jquery.min.js"></script>
<!-- 导入的框架 -->
<script src="js/jquery.validate.min.js"></script>
<script>
$(function(){
$('#a').validate({
rules:{
username:{
required:true
},
password_1:{
required:true,
rangelength:[5,10], },
password_2:{
required:true,
equalTo:'#pa'
},
sex:{
required:true
},
you:{
required:true,
email:true
}, },
messages:{
username:{
required:'字段不能为空'
},
password_1:{
required:'字段不能为空',
rangelength:'密码长度要在5到10位',
},
password_2:{
required:'字段不能为空',
equalTo:'两次密码不一样'
},
sex:{
required:'性别不能为空',
},
you:{
required:'邮箱不能为空',
email:'邮箱格式不对'
}
}
})
})
</script>
</head>
<body>
<form action="a.jsp" method="post" id="a">
请输入姓名:<input type="text" name="username" ><br>
请输入密码: <input type="password" name="password_1" id="pa"><br>
确认密码: <input type="password" name="password_2" ><br> 性别: <input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<label for="sex" generated="true" class="error"></label><br>
邮箱: <input type="text" name="you" ><br>
<input type="submit" value="submit">
</form>
</body>
</html>
第二种就是js的blur事件写的验证：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
/* form{
margin-left:400px;
} */
</style>
<script src="js/jquery.min.js"></script> <script>
$(function () {
var a = b = c = d = e = f = g = false;
$("#tables").css({ "border": '1px solid blue', 'text-align': 'center' }).css("width", "800").css("height", "400px")
$('td').css({ "border": "1px solid blue" })
$("#td1").css({ 'width': '100' })
$("#td2").css({ "width": "400" })
$("#td3").css({ "width": "300" })
// 设置id a的颜色
$('span').css('color', 'red')
//登录名的验证
$("input[name='username']").blur(function () {
var va = $(this).val();
var char = va.charCodeAt(0);
//alert(va);
if (va == "") {
a = false;
// $(this).click(function(){
// $('#a').css('background','blue').css('width','100px')
// })
$('#a').html(function () {
return "值不能为空";
})
}
else if (va.length < 6) {
a = false;
$('#a').html('登录名不能少于6个字')
}
else if (!((char >= 65 && char <= 90) || (char >= 97 && char <= 122))) {
a = false;
$('#a').html('登录名的首字母只能为字母')
}
else {
a = true;
$('#a').html(function () {
return '';
})
}
})
//验证姓氏
$("input[name='xing']").blur(function () {
var xing = $(this).val();
if (xing == '') {
b = false;
$('#b').html('值不能为空')
}
else if(xing.length>6){
b=false;
$('#b').html('你的姓氏不符合要求,字符长度超过6')
}
else{
b=true;
$('#b').html(function(){
return '';
})
}
})
//验证密码
$('#password_1').blur(function(){
var va=$('#password_1').val();
if(va==''){
c=false;
$('#c').html('密码不能为空')
}
else if(va.length<8){
c=false;
$('#c').html('你的密码不足8位数不符合要求')
}
else{
c=true;
$('#c').html('');
}
})
//密码重复验证
$('#password_2').blur(function(){
//拿到本身的密码
var va1=$(this).val();
//拿到之前的密码
var va2=$('#password_1').val();
if(va1==''){
d=false;
$('#d').html('密码不能为空')
}
else if(va1!=va2){
d=false;
$('#d').html('两次密码不正确')
}
else{
d=true;
$('#d').html('')
}
})
//性别选择直接选中下下标为1的
$('input[name=sex]:eq(1)').prop('checked','checked')
$('input[name=sex]').blur(function(){ })
//年验证
$('#year').blur(function(){
//拿到年的值
var va=$(this).val();
// var v=Number(va);
//alert(va)
var s=/^[0-9]+$/;
if(va==''){
f=false;
$('#f').hmtl('年不能为空')
}
// else if(!s.test(va)){
// f=false;
// $('#f').hmtl('年只能是数字')
// }
else if(isNaN(va)){
f=false;
$('#f').html('年只能是数字')
}
else if(va.length!=4){
f=false;
$('#f').html('值必须为4位数')
}
else{
f=true;
$('#f').html('')
} })
//天数验证
$("input[name='day']").blur(function(){
var va=$(this).val();
var t = /^(([1-9])|((1|2)[0-9])|30|31)$/;
if(va===''){
g=false;
$('#f').html('天数不能为空')
}
else if(! t.test(va)){
g=false;
$('#f').html('对不起，天数必须在 1-31 之间!')
}else{
g=true;
$('#f').html('')
}
})
$('#su').click(function(){
return a&&b&&c&&d&&f&&g
}) })
</script> <body>
<form action="s">
<table id="tables">
<tr>
<td colspan="3">
<img src="data:images/d.png" alt="">
</td> </tr>
<tr>
<td id="td1">登录名</td>
<td id="td2">
<input id="input1" type="text" name="username">
</td>
<td id="td3">
<span id="a"></span>
</td>
</tr>
<tr>
<td>姓氏</td>
<td>
<input type="text" name="xing">
</td>
<td>
<span id="b"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" id="password_1">
</td>
<td>
<span id="c"></span>
</td>
</tr>
<tr>
<td>再次输入密码</td>
<td>
<input type="password" name="password" id="password_2">
</td>
<td>
<span id="d"></span>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女">女
</td>
<td>
<span id="e"></span>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<input type="text" name="year" id="year">
<select name="month" id="select_1">
<option value="一月" selected>一月</option>
<option value="二月">二月</option>
<option value="三月">三月</option>
</select>
<input type="text" name="day">
</td>
<td>
<span id="f"></span>
</td>
</tr>
<tr>
<td colspan="3">
<input type="reset" value="reset">
</td> </tr>
<tr>
<td colspan="3">
<input type="submit" value="提交" id="su">
</td>
</tr>
</table>
</form>
</body> </html>
jQuery表单验证的几种方法的更多相关文章
- ace+validate表单验证（两种方法）
//修改密码(直接在validate中验证提交) $("#changePassword").on(ace.click_event, function() { var html = ...
- jquery表单重置另一种方法
页面中按钮为<a>标签时,点击取消按钮,表单内容重置,需要给form表单id="form": <a class="demo_one1" onc ...
- 【jquery】Validform，一款不错的 jquery 表单验证插件
关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...
- python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- jquery表单验证使用插件formValidator
JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...
- HTML5中表单验证的8种方法(转)
在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义.就其核心而言,表单验证是一套系统,它为终端用户检测无效的控件数据并标记这些错误.换言之,表单验证就是在表单提交服务器前对其进行一系列的检查并 ...
- JQuery 表单验证--jquery validation
jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...
- jquery validate强大的jquery表单验证插件
jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...
随机推荐
- CXPACKET等待事件
今天收到数据库预警,发现连接数较多.于是立马登录查看机器的基本情况: select * from sys.sysprocesses 查看了一下连接数,发现有两个进程都处于CXPACKET状态,而且看得 ...
- 【Leetcode】【Easy】Count and Say
The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, 1211, 111221, ...
- Word 启动模板文件
运行窗口输入:%appdata%\microsoft\templates
- linux防火墙放行了端口，但是仍然访问不到
我们的防火墙默认规则如下: 如果防火墙放行了端口,但是仍然访问不到的话,可能是因为添加规则的时候,用的是iptables -A 选项,这样,增加的规则会排列在 第6条 规则后面,虽然service i ...
- 学习Road map Part 04 自动驾驶、SLAM、ROS、树莓派
学习Road map Part 04 自动驾驶.SLAM.ROS.树莓派
- 如果使用没有提供选项值的 SqlDependency，必须先调用 SqlDependency.Start()，然后才能执行添加到 SqlDependency 实例中的命令
如标题错误,解决办法及出现错误情况,见图片 出现如图错误
- 漫谈 Clustering (4): Spectral Clustering
转:http://blog.pluskid.org/?p=287 如果说 K-means 和 GMM 这些聚类的方法是古代流行的算法的话,那么这次要讲的 Spectral Clustering 就可以 ...
- 在windows平台上构建自己的PHP（仅适用于php5.2）
构建步骤 1, 安装vs2008 2, 安装windows sdk 6.1 3, 下载php 5.2源码,可以从此处获取Releases(先不要解压) 4, 下载bindlib_w32.zip,htt ...
- Posix多线程编程学习笔记
Blaise Barney, Lawrence Livermore National Laboratory )标准制订了这一标准接口.依赖于该标准的实现就称为POSIX threads 或者Pthre ...
- pg 关于不插入重复字段的方法
首先在表的某列加入唯一约束 alter table language_pms add CONSTRAINT language_pms_unique unique(xml); insert into l ...