首页
所有分类
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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
js前端日历控件（悬浮、拖拽、自由变形）
Mar 02 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 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) BOSE(2) 音箱(1) 电路(15) 耳机(1) 探测器(1) 春雷3P7(1) AM(1) ICF-2010(1)
You might like
php win下Socket方式发邮件类
2009/08/21 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
Javascript倒计时代码
2010/08/12 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python脚本实现查找webshell的方法
2014/07/31 Python
python开启多个子进程并行运行的方法
2015/04/18 Python
python中list列表的高级函数
2016/05/17 Python
python实现文件的备份流程详解
2019/06/18 Python
python pandas 时间日期的处理实现
2019/07/30 Python
Python实现图像的垂直投影示例
2020/01/17 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
Python 创建守护进程的示例
2020/09/29 Python
荷兰之家英文站：Holland at Home
2016/10/26 全球购物
好莱坞百老汇御用王牌美妆：Koh Gen Do 江原道
2018/04/03 全球购物
德国高端单身人士交友网站：ElitePartner
2018/12/02 全球购物
英国排名第一的餐具品牌：Denby Pottery
2019/11/01 全球购物
Dr. Martens马汀博士法国官网：马丁靴鼻祖
2020/01/15 全球购物
上班早退检讨书
2014/01/09 职场文书
预备党员承诺书
2014/03/25 职场文书
北京奥运会主题口号
2014/06/13 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python