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 相关文章推荐
JavaScript入门之对象与JSON详解
Oct 21 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
js逆向解密之网络爬虫
May 30 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 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计算十二星座的函数代码
2012/08/21 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
JS实现的二叉树算法完整实例
2017/04/06 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
python paramiko实现ssh远程访问的方法
2013/12/03 Python
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Python 迭代器工具包【推荐】
2016/05/06 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
详解Python传入参数的几种方法
2019/05/16 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
会计演讲稿范文
2014/05/23 职场文书
党员转正介绍人意见
2015/06/03 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
GPU服务器的多用户配置方法
2022/07/07 Servers
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技