jQuery formValidator表单验证


Posted in Javascript onJanuary 07, 2016

作为一名程序员,在解决工作中遇到问题之后,做一些总结是有必要的,既方便总结温习相关知识点,也为广大的程序员提供了一些工作经历,给予同行一面明鉴.

html部分:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formValidator</title>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/formValidator-4.0.1.min.js"></script>
<script src="js/DateTimeMask.js"></script>
<script src="js/formValidatorRegex.js"></script>
<link rel="stylesheet" href="css/validator.css">
<style>
form{
width: 500px;
margin: 100px auto;
}
table tr td:first-child{
text-align: right;
}
table tr td{
padding: 5px 0;
}
div{
margin-left: 10px;
padding: 0 10px;
}
</style>
</head>
<body>
<form name="myfm" id="myfm" action="1.html">
<table>
<tbody>
<tr>
<td><label for="uname">用户名:</label></td>
<td><input type="text" id="uname" name="uname"/></td>
<td><div id="unameTip"></div></td>
</tr>
<tr>
<td><label for="pwd">密码:</label></td>
<td><input type="password" id="pwd" name="pwd"/></td>
<td><div id="pwdTip"></div></td>
</tr>
<tr>
<td><label for="repwd">重复密码:</label></td>
<td><input type="password" name="repwd" id="repwd"/></td>
<td><div id="repwdTip"></div></td>
</tr>
<tr>
<td><label>性别:</label></td>
<td>
<input type="radio" name="sex" value="male" id="male"/>
<label for="male">男</label>
<input type="radio" name="sex" value="female" id="female"/>
<label for="female">女</label>
</td>
</tr>
<tr>
<td><label for="area">地区:</label></td>
<td>
<select name="area" id="area">
<option value="0">- 请选择 -</option>
<option value="1">锦江区</option>
<option value="2">金牛区</option>
<option value="3">龙泉驿区</option>
<option value="4">青羊区</option>
</select>
</td>
</tr>
<tr>
<td><label for="num">身份证:</label></td>
<td><input type="text" id="num" name="num"/></td>
<td><div id="numTip"></div></td>
</tr>
<tr>
<td><label for="phone">电话号码:</label></td>
<td><input type="text" name="phone" id="phone"/></td>
<td><div id="phoneTip"></div></td>
</tr>
<tr>
<td><label for="email">邮箱:</label></td>
<td><input type="text" name="email" id="email"/></td>
<td><div id="emailTip"></div></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" id="submit" value="提交"/></td>
<td></td>
</tr>
</tbody>
</table>
</form>
<script>
$.formValidator.initConfig({ //用于配置当前formValidator插件
formID:"myfm",
debug:false,
submitOnce:true,
validatorGroup : '1', //设置验证组,默认值为1
onSuccess : function(){ //验证成功后的回调函数
}, 
onError:function(){ //验证失败后的回调函数
} 
});
$('#uname').formValidator({
ValidatorGroup : '1', //验证组为1 
onEmpty : '用户名不能为空', //提示用户名不能为空
onShow : "", 
onFocus : '用户名必须为1到12位的数字或字母',//表单元素获得焦点的时候提示应输入的格式
onCorrect : '用户名输入正确' //输入正确的提示
})
.regexValidator({
regExp : '^[0-9a-zA-Z]{1,12}$', //验证表单输入的正则表达式
onError : '用户名格式有误,请从新输入' //输入错误的提示
})
.ajaxValidator({ //验证输入的用户名是否已经存在
dataType : 'html', //请求数据的格式
async : true, //异步方式
url : 'test.php',
success : function(data){
if (data=='false') {
return false;
}else{
return true;
}
},
onError : '该用户名已存在,请从新输入',
onWait : '正在对用户名进行合法性校验,请稍候...'
});
$('#pwd').formValidator({
ValidatorGroup : '1',
onEmpty : '密码不能为空',
onShow : "",
onFocus : '密码必须为6位以上的字母或数字',
onCorrect : '密码输入正确'
})
.regexValidator({
regExp : '[0-9a-zA-Z]{6,}',
onError : '密码格式有误,请从新输入'
});
$('#repwd').formValidator({
ValidatorGroup : '1',
onEmpty : '密码不能为空',
onShow : "",
onFocus : '密码必须为6位以上的字母或数字',
onCorrect : '密码输入正确'
})
.regexValidator({
regExp : '^[0-9a-zA-Z]{6,}$',
onError : '密码格式不正确'
})
.compareValidator({ //比较两次输入内容是否符合下面给出的比较符号
desID : 'pwd', //相比较的表单元素的ID值
operateor : '=', //要比较的两个元素之间的关系
onError : '两次密码输入不一致,请从新输入' //不满足以上关系的时候的提示
});
$('#num').formValidator({
ValidatorGroup : '1',
onEmpty : '身份证不能为空',
onShow : '',
onFocus : '请输入您的身份证号',
onCorrect : '身份证格式正确'
}).regexValidator({
regExp : '^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{4}$',
//15位身份证号码的正则表达式/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/
onError : '身份证格式有误,请从新输入'
});
$('#phone').formValidator({
ValidatorGroup : '1',
onEmpty : '手机号码不能为空',
onShow : '',
onFocus : '请输入您的手机号码',
onCorrect : '手机号码格式正确',
})
.regexValidator({
regExp : '^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$',
onError : '手机号码格式有误,请从新输入'
});
$('#email').formValidator({
ValidatorGroup : '1',
onEmpty : '邮箱地址不能为空',
onShow : '',
onFocus : '请输入您的邮箱地址',
onCorrect : '邮箱格式正确'
})
.regexValidator({
regExp : '^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$',
onError : '邮箱格式有误,请从新输入'
});
</script>
</body>
</html>
php部分代码:
<?php
header('Content-Type:html');
$name=array('Tom','ervin','Jhon');
$uname=$_REQUEST['uname'];
$notexit='true';
for ($i=0; $i <3 ; $i++) { 
if ($uname==$name[$i]) {
$notexit='false';
break;
}else{
}
}
echo "$notexit";
?>

以上内容是小编给大家介绍的jQuery formValidator表单验证相关知识,希望对大家有所帮助,同时感谢大家对三水点靠木网站的支持。

Javascript 相关文章推荐
JavaScript 学习历程和心得分享
Dec 12 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
深入探究node之Transform
Jul 20 Javascript
基于vue实现分页效果
Nov 06 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 Javascript
JavaScript中的原始值和复杂值
Jan 07 #Javascript
理解JS事件循环
Jan 07 #Javascript
angularjs创建弹出框实现拖动效果
Aug 25 #Javascript
JavaScript中定义类的方式详解
Jan 07 #Javascript
javascript类型系统 Window对象学习笔记
Jan 07 #Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 #Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 #Javascript
You might like
基于mysql的论坛(2)
2006/10/09 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
用JS实现的一个include函数
2007/07/21 Javascript
Cookie 小记
2010/04/01 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
详解python中requirements.txt的一切
2017/03/03 Python
python 接口返回的json字符串实例
2018/03/27 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
详细分析Python垃圾回收机制
2020/07/01 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
高中军训感言500字
2014/02/24 职场文书
前处理班长职位说明书
2014/03/01 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
二胎满月酒致辞
2015/07/29 职场文书
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技