JS表单验证的代码(常用)


Posted in Javascript onApril 08, 2016

最近没有项目做,有点空余时间,小编把日常比较常用的js表单验证代码整理分享到三水点靠木平台,供大家学习,需要的朋友参考下吧!

注册验证:

<script language="JavaScript" src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
//验证表单
function vailForm(){
var form = jQuery("#editForm");
if(!vailNickName())return;
if(!vailPhone())return;
if(!vailPwd())return;
if(!vailConfirmPwd())return;
if(!vailEmail())return;
if(!vailCode())return;
if(!vailAgree())return;
form.submit();
}
//验证昵称
function vailNickName(){
var nickName = jQuery("#nickName").val();
var flag = false;
var message = "";
var patrn=/^\d+$/;
var length = getNickNameLength();
if(nickName == ''){
message = "昵称不能为空!";
}else if(length<4||length>16){
message = "昵称为4-16个字符!";
} else if(checkNickNameIsExist()){
message = "该昵称已经存在,请重新输入!";
}else{
flag = true;
}
if(!flag){
jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-error");
jQuery("#nickNameP").html("");
jQuery("#nickNameP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
//jQuery("#nickName").focus();
}else{
jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-success");
jQuery("#nickNameP").html("");
jQuery("#nickNameP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>该昵称可用");
}
return flag;
}
//计算昵称长度
function getNickNameLength(){
var nickName = jQuery("#nickName").val();
var len = 0;
for (var i = 0; i < nickName.length; i++) {
var a = nickName.charAt(i);


//函数格式:stringObj.match(rgExp) stringObj为字符串必选 rgExp为正则表达式必选项



//返回值:如果能匹配则返回结果数组,如果不能匹配返回null
if (a.match(/[^\x00-\xff]/ig) != null){
len += 2;
}else{
len += 1;
}
}
return len;
}
//验证昵称是否存在
function checkNickNameIsExist(){
var nickName = jQuery("#nickName").val();
var flag = false;
jQuery.ajax(
{ url: "checkNickName?t=" + (new Date()).getTime(),
data:{nickName:nickName},
dataType:"json",
type:"GET",
async:false,
success:function(data) {
var status = data.status;
if(status == "1"){
flag = true;
}
}
});
return flag;
}
//验证手机号
function vailPhone(){
var phone = jQuery("#phone").val();
var flag = false;
var message = "";
//var myreg = /^(((13[0-9]{1})|159|153)+\d{8})$/;
var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-3]{1})|(18[5-9]{1}))+\d{8})$/;
if(phone == ''){
message = "手机号码不能为空!";
}else if(phone.length !=11){
message = "请输入有效的手机号码!";
}else if(!myreg.test(phone)){
message = "请输入有效的手机号码!";
}else if(checkPhoneIsExist()){
message = "该手机号码已经被绑定!";
}else{
flag = true;
}
if(!flag){
jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-error");
jQuery("#phoneP").html("");
jQuery("#phoneP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
//jQuery("#phone").focus();
}else{
jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-success");
jQuery("#phoneP").html("");
jQuery("#phoneP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>该手机号码可用");
}
return flag;
}
//验证手机号是否存在
function checkPhoneIsExist(){
var phone = jQuery("#phone").val();
var flag = true;
jQuery.ajax(
{ url: "checkPhone?t=" + (new Date()).getTime(),
data:{phone:phone},
dataType:"json",
type:"GET",
async:false,
success:function(data) {
var status = data.status;
if(status == "0"){
flag = false;
}
}
});
return flag;
}
//验证密码
function vailPwd(){
var password = jQuery("#password").val();
var flag = false;
var message = "";
var patrn=/^\d+$/;
if(password ==''){
message = "密码不能为空!";
}else if(password.length<6 || password.length>16){
message = "密码6-16位!";
}else if(patrn.test(password)){
message = "密码不能全是数字!";
}else{
flag = true;
}
if(!flag){
jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-error");
jQuery("#passwordP").html("");
jQuery("#passwordP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
//jQuery("#password").focus();
}else{
jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-success");
jQuery("#passwordP").html("");
jQuery("#passwordP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>该密码可用");
}
return flag;
}
//验证确认密码
function vailConfirmPwd(){
var confirmPassword = jQuery("#confirm_password").val();
var patrn=/^\d+$/;
var password = jQuery("#password").val();
var flag = false;
var message = "";
if(confirmPassword == ''){
message = "请输入确认密码!";
}else if(confirmPassword != password){
message = "二次密码输入不一致,请重新输入!";
}else if(patrn.test(password)){
message = "密码不能全是数字!";
}else {
flag = true;
}
if(!flag){
jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-error");
jQuery("#confirmPasswordP").html("");
jQuery("#confirmPasswordP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
//jQuery("#confirm_password").focus();
}else{
jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-success");
jQuery("#confirmPasswordP").html("");
jQuery("#confirmPasswordP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>密码正确");
}
return flag;
}
//验证邮箱
function vailEmail(){
var email = jQuery("#email").val();
var flag = false;
var message = "";
var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; 
if(email ==''){
message = "邮箱不能为空!";
}else if(!myreg.test(email)){
message = "请输入有效的邮箱地址!";
}else if(checkEmailIsExist()){
message = "该邮箱地址已经被注册!";
}else{
flag = true;
}
if(!flag){
jQuery("#emailDiv").removeClass().addClass("ui-form-item has-error");
jQuery("#emailP").html("");
jQuery("#emailP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
//jQuery("#email").focus();
}else{
jQuery("#emailDiv").removeClass().addClass("ui-form-item has-success");
jQuery("#emailP").html("");
jQuery("#emailP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>该邮箱可用");
}
return flag;
}
//验证邮箱是否存在
function checkEmailIsExist(){
var email = jQuery("#email").val();
var flag = false;
jQuery.ajax(
{ url: "checkEmail?t=" + (new Date()).getTime(),
data:{email:email},
dataType:"json",
type:"GET",
async:false,
success:function(data) {
var status = data.status;
if(status == "1"){
flag = true;
}
}
});
return flag;
}
//验证验证码
function vailCode(){
var randCode = jQuery("#randCode").val();
var flag = false;
var message = "";
if(randCode == ''){
message = "请输入验证码!";
}else if(!checkCode()){
message = "验证码不正确!";
}else{
flag = true;
}
if(!flag){
jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-error");
jQuery("#randCodeP").html("");
jQuery("#randCodeP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message);
//jQuery("#randCode").focus();
}else{
jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-success");
jQuery("#randCodeP").html("");
jQuery("#randCodeP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>");
}
return flag;
}
//检查随机验证码是否正确
function checkCode(){
var randCode = jQuery("#randCode").val();
var flag = false;
jQuery.ajax(
{ url: "checkRandCode?t=" + (new Date()).getTime(),
data:{randCode:randCode},
dataType:"json",
type:"GET",
async:false,
success:function(data) {
var status = data.status;
if(status == "1"){
flag = true;
}
}
});
return flag;
}
//判断是否选中
function vailAgree(){
if(jQuery("#agree").is(":checked")){
return true;
}else{
alert("请确认是否阅读并同意XX协议");
}
return false;
}
function delHtmlTag(str){ var str=str.replace(/<\/?[^>]*>/gim,"");//去掉所有的html标记 var result=str.replace(/(^\s+)|(\s+$)/g,"");//去掉前后空格 return result.replace(/\s/g,"");//去除文章中间空格}<!DOCTYPE html><html><body><h1>我的第一段 JavaScript</h1><p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p><input id="demo" type="text"><script>function myFunction(){var x=document.getElementById("demo").value;if(x==""){ alert("输入不能为空"); return;}if(isNaN(x)){ alert("请输入数字"); return;}if(x.length!=6){ alert("请输入6位数字"); return;}}</script><button type="button" onclick="myFunction()">点击这里</button></body></html> 
//验证密码为数字字母下划线
function CheckPwd(pwd) {
var validStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_~/!@#$%^&*();-+.=,";
for (i = 0; i < pwd.length; i++) {
if (validStr.indexOf(pwd.charAt(i)) == -1) {
return false;
}
}
return true;
}
//验证邮箱格式
function checkemail(email) {
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email)) {
return false;
}
return true;
}
function isEmail(val) {
return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_\`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/.test(val);
}
///手机号码验证
function checktelephone(cellPhone) {
var RegCellPhone = /^([0-9]{11})?$/;
falg = cellPhone.search(RegCellPhone);
if (falg == -1) {
return false;
} else {
return true;
}
}
//获取URL参数值
function getParameter(param) {
var query = window.location.search;
var iLen = param.length;
var iStart = query.indexOf(param);
if (iStart == -1)
return "";
iStart += iLen + 1;
var iEnd = query.indexOf("&", iStart);
if (iEnd == -1)
return query.substring(iStart);
return query.substring(iStart, iEnd);
}

以上代码是小编给大家介绍的js表单验证,代码简单易懂,非常实用,希望对大家有所帮助,同时也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 Javascript
JavaScript事件代理和委托详解
Apr 08 #Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 #Javascript
关于cookie的初识和运用(js和jq)
Apr 07 #Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 #Javascript
原生JavaScript实现Ajax的方法
Apr 07 #Javascript
JavaScript数据推送Comet技术详解
Apr 07 #Javascript
js实现商品抛物线加入购物车特效
Nov 18 #Javascript
You might like
PHP函数getenv简介和使用实例
2014/05/12 PHP
php之curl设置超时实例
2014/11/03 PHP
php pdo操作数据库示例
2017/03/10 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
javascript hashtable实现代码
2009/10/13 Javascript
js中生成map对象的方法
2014/01/09 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
Python实现分割文件及合并文件的方法
2015/07/10 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Django自定义manage命令实例代码
2018/02/11 Python
Python实现按中文排序的方法示例
2018/04/25 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
python matplotlib拟合直线的实现
2019/11/19 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
python统计文章中单词出现次数实例
2020/02/27 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
css3的transition属性详解
2014/12/15 HTML / CSS
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
邀请书格式范文
2015/02/02 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL