首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

常用javascript表单验证汇总

Posted in Javascript onJuly 20, 2020

实例讲解：验证输入的是否是数字，是否满足数字位数，如果错误，并进行友情提醒。

效果图：

常用javascript表单验证汇总

常用javascript表单验证汇总

<!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>

上面这个实例包含了许多常用的表单验证的代码，下面分享给大家：

1、验证表单

2、验证昵称

3、计算昵称长度

4、验证昵称是否存在

5、验证手机号

6、验证密码

7、验证邮箱

8、验证验证码

9、判断是否选中

 注册验证为例：

<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,"");//去除文章中间空格
}

以上就是实用的javascript表单验证，希望大家喜欢。

常用javascript表单验证汇总

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript call方法使用说明
Jan 11 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
微信小程序删除处理详解
Aug 16 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 #Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 #Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 #Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 #Javascript
跟我学习javascript的函数和函数表达式
Nov 16 #Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 #Javascript
uploadify多文件上传参数设置技巧
Nov 16 #Javascript
铁拳(1) 原神(1) 模拟人生(1) FS1016(1) 死亡搁浅(1) 大话西游(1) 吸血鬼(1) BCLer(1) AGC(1) 74HC4066(1)
You might like
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
php中使用url传递数组的方法
2015/02/11 PHP
再次更新！MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
中止javascript执行的方法
2014/02/14 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
input输入框内容实时监测(附代码)
2017/08/15 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
python二叉树的实现实例
2013/11/21 Python
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
如何利用python查找电脑文件
2018/04/27 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
Python列表与元组的异同详解
2019/07/02 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
python实现IOU计算案例
2020/04/12 Python
基于PyTorch中view的用法说明
2021/03/03 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
Reebok俄罗斯官方网上商店：购买锐步运动服装和鞋子
2016/09/26 全球购物
英国时尚饰品和发饰购物网站：Claire’s
2017/07/04 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
班级口号大全
2014/06/09 职场文书
应聘护士求职信
2014/07/21 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
python 中的@运算符使用
2021/05/26 Python
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python