首页
所有分类
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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 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
ip2region(1) scrapy(1) virtualenv(1) Postman(1) dataBinding(1) 注解(1) 反射(1) BottomSheetDialog(1) Quartz(1) DeOldify(1)
You might like
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
php中define用法实例
2015/07/30 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
JavaScript入门基础
2015/08/12 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
微信小程序 轮播图swiper详解及实例（源码下载）
2017/01/11 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
Python实现word2Vec model过程解析
2019/12/16 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
咖啡店自主创业商业计划书
2014/01/22 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
党校学习党性分析材料
2014/12/19 职场文书
安全保证书
2015/01/16 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
浅谈MySQL中的六种日志
2022/03/23 MySQL