关闭

[置顶] 【JS】JavaScript进行表单验证经常使用的判断条件

标签: javascripthtml表单函数jsp
667人阅读 评论(13) 收藏 举报
分类:

一、前言

      提交表单的时候有很多的条件需要判断,我们可以通过JS在html页面或者是jsp页面进行验证,下面小编就列出来常用的一些js验证使用的js代码,可以把他们抽取出来到一个js文件中,各个页面可以引用这个文件,使用这些方法。

二、js验证代码

  • 是否为空校验
//是否为空校验
function isEmpty(s) {
    var lll=trim(s);
    if( lll == null || lll.length == 0 )
        return true;
    else
        return false;
}
  • 删除字符串左边的空格

//删除字符串左边的空格
function ltrim(str) { 
    if(str.length==0)
        return(str);
    else {
        var idx=0;
        while(str.charAt(idx).search(/\s/)==0)
            idx++;
        return(str.substr(idx));
    }
}
  • 删除字符串右边的空格
//删除字符串右边的空格
function rtrim(str) { 
    if(str.length==0)
        return(str);
    else {
        var idx=str.length-1;
        while(str.charAt(idx).search(/\s/)==0)
            idx--;
        return(str.substring(0,idx+1));
    }
}
  • 删除字符串左右两边的空格
//删除字符串左右两边的空格
function trim(str) { 
    return(rtrim(ltrim(str)));
}
  • 日期相比较

/*日期相比较*/
function compareDate(date1, date2) {
    if (trim(date1) == trim(date2))     
        return 0;
    if (trim(date1) > trim(date2))      
        return 1;
    if (trim(date1) < trim(date2))      
        return -1;
}
  • 校验是否是Email
//校验是否是Email
function isEmail(eml) {
    if(trim(eml)!='') {
      var re=new RegExp("@[\\w]+(\\.[\\w]+)+$");
      return(re.test(eml));
    }
    else
      return(true);
}
  • 是否是电话号
//是否是电话号
function isTel(tel) {
    var charcode;
    for (var i=0; i<tel.length; i++)    
    {
        charcode = tel.charCodeAt(i);
        if (charcode < 48 && charcode != 45 || charcode > 57)   
            return false;
    }
    return true;
}
  • 校验是否是实数

//校验是否是实数
function isnumber(num) {
    var re=new RegExp("^-?[\\d]*\\.?[\\d]*$");
    if(re.test(num))
        return(!isNaN(parseFloat(num)));
    else
        return(false);
}
  • 校验是否是整数
//校验是否是整数
function isinteger(num) {
    var re=new RegExp("^-?[\\d]*$");
    if(re.test(num))
        return(!isNaN(parseInt(num)));
    else
        return(false);
}

三、举例

这是一个示例的表单,提交要求如下:

  • 用户代码不为空,至少四位,首字符为字母

  • 用户名不为空

  • 密码至少6位

  • 联系电话不为空,进行判断,规则:都为数字

  • email,条件:包含@,@不出现在最前面,也不出现在最后面

这里写图片描述

实现代码:

function addUser() {
        var userIdField = document.getElementById("userId");
        //用户代码不能为空
        if (trim(userIdField.value) == "" ) {
            alert("用户代码不能为空!");
            userIdField.focus();
            return;
        }
        //用户代码至少四个字符
        if (trim(userIdField.value).length < 4) {
            alert("用户代码至少4个字符!");
            userIdField.focus();
            return;
        }

        //第一个字符必须是字母
        if (!(trim(userIdField.value).charAt(0) >='a' && trim(userIdField.value).charAt(0) <='z')) {
            alert("用户代码首字符必须为字母!");
            userIdField.focus();
            return;
        }

        //判断用户代码只能是数字或字母,为4~6位
        /*
        if (!(trim(userIdField.value).length >=4 && trim(userIdField.value).length <=6)) {
            alert("用户代码只能为4~6位!!");
            userIdField.focus();
            return;
        }
        for (var i=0; i<trim(userIdField.value).length; i++) {
            var c = trim(userIdField.value).charAt(i);
            if (!((c >= '0' && c <='9') || (c >='a' && c <='z') || (c >='A' && c <='Z'))) {
                alert("用户代码必须为数字和字母!");
                userIdField.focus();
                return;
            }
        }
        */

        //采用正则表达式判断用户代码只能是数字或字母,为4~6位(中午作业)
        var re = new RegExp("/^[a-zA-Z0-9]{4,6}$/");
        if (!re.test(trim(userIdField.value))) {
            alert("用户代码必须为数字或字母,只能为4~6位!");
            userIdField.focus();
            return;
        }


        //用户名称必须输入,不能和用户代码不能为空一致(中午作业)
        if (trim(document.getElementById("userName").value).length == 0) {
            alert("用户名称不能为空!");
            document.getElementById("userName").focus();
            return;
        }

        //密码至少6位(中午作业)
        if (trim(document.getElementById("password").value).length < 6) {
            alert("密码至少6位!");
            document.getElementById("password").focus();
            return;
        }
        //如果联系电话不为空,进行判断,判断规则:都为数字,采用两种方式:1、采用正则,2、不采用正则(中午作业)
        var contactTelField = document.getElementById("contactTel");
        //alert("a" + trim(contactTelField.value) + "a");
        //不采用正则
        /*
        if (trim(contactTelField.value) != "") {

            for (var i=0; i<trim(contactTelField.value).length; i++) {
                var c = trim(contactTelField.value).charAt(i);
                if (!(c >= '0' && c <= '9')) {
                    alert("电话号码不合法!");
                    contactTelField.focus();
                    return;
                }
            }
        }
        */
        if (trim(contactTelField.value) != "") { 
            //采用正则
            re.compile(/^[0-9]*$/);
            if (!re.test(trim(contactTelField.value))) {
                alert("电话号码不合法!");
                contactTelField.focus();
                return;
            }   
        }

        //如果emial不能空,进行判断,判断规则:只要包含@即可,@最好不再最前面和最后面
        var emailField = document.getElementById("email");
        if (trim(emailField.value).length != 0) {
            var emailValue = trim(emailField.value);
            if ((emailValue.indexOf("@") == 0) || (emailValue.indexOf("@") == (emailValue.length - 1))) {
                alert("email地址不正确!");
                emailField.focus();
                return;             
            }
            if (emailValue.indexOf("@") < 0) {
                alert("email地址不正确!");
                emailField.focus();
                return;             
            }
        }

        /*
        document.getElementById("userForm").action="user_add.jsp";
        document.getElementById("userForm").method="post";
        document.getElementById("userForm").submit();
        */

        //等同上面的写法
        with (document.getElementById("userForm")) {
            action="user_add.jsp";
            method="post";
            submit();
        }
    }

注意:在使用正则表达式的时候需要提前创建正则表达式对象,比如var re = new RegExp(“/^[a-zA-Z0-9]{4,6}$/”);

四、小结

      代码库!这是大家的代码库!

      以后做web项目必不可少的验证,这些是js的基础,使用了DOM来进行数据的获取验证,使用了BOM进行数据向后台的传输,总之大家还是要对这里的知识比较熟悉,熟悉一下服务器控件和html控件的传输数据区别。

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

利用js和Ajax实现的表单的检查和提交

1. 要求       在设计表单提交时,我们经常需要对表单的内容进行检查,然后再将表单提交到服务器进行相关的操作。这里以向数据库中添加一个用户名为例,主要要求有两点:(1) 提交用户名之前检查用户名...
  • cighao
  • cighao
  • 2015-09-01 19:21
  • 2037

整理的一些常用的js表单验证

/** * 验证时间 * @param dataValue 格式为:YYYY-MM-DD * @returns 匹配返回true 不匹配返回false */ function valiDate...
  • zp522123428
  • zp522123428
  • 2014-09-05 09:36
  • 5178

Html JS实现表单验证

  • HeartIsland
  • HeartIsland
  • 2015-07-30 21:05
  • 4667

javascript中简单的表单提交判断条件

网页标题 //准备好body中的内容 //使用用户聚焦的函数 function userGetFocus(){ //获取userspan的Id var spa...
  • Fa_Ker
  • Fa_Ker
  • 2016-04-24 00:20
  • 174

js:使用ajax作为判断条件时 需要注意的地方

在js中 当我们以ajax方法的返回值作为判断时 会出现判断不了的情况 方法返回值永远都是undefined 即便加了同步属性async:false 也是如此 代码如上 你会发现 方法里面明明写...
  • qq_34110755
  • qq_34110755
  • 2018-01-04 15:18
  • 65

javascript:if中可以使用那些作为判断条件

在所有编程语言中if是最长用的判断之一,但在js中到底哪些东西可以在if中式作为判断表达式呢? 例如如何几行,只是少了一个括号,真假就完全不同,到底表示什么含义呢 var obj={}; ...
  • vv354123
  • vv354123
  • 2014-12-12 16:31
  • 1864

js面向对象编程:if中可以使用那些作为判断条件呢?

在所有编程语言中if是最长用的判断之一,但在js中到底哪些东西可以在if中式作为判断表达式呢?      例如如何几行,只是少了一个括号,真假就完全不同,到底表示什么含义呢  var ...
  • xuexiaodong2009
  • xuexiaodong2009
  • 2014-07-07 08:52
  • 2324

js面向对象编程:if中可以使用那些作为判断条件呢?

在所有编程语言中if是最长用的判断之一,但在js中到底哪些东西可以在if中式作为判断表达式呢?例如如何几行,只是少了一个括号,真假就完全不同,到底表示什么含义呢 var obj={};obj.Fun...
  • hxkqq457624390ok
  • hxkqq457624390ok
  • 2017-04-11 14:19
  • 327

js面向对象编程:if中可以使用那些作为判断条件呢?

在所有编程语言中if是最长用的判断之一,但在js中到底哪些东西可以在if中式作为判断表达式呢? 例如如下几行,只是少了一个括号,真假就完全不同,到底表示什么含义呢? var o...
  • smile_lg
  • smile_lg
  • 2017-05-09 10:47
  • 193

使用JavaScript语言进行表单验证

  • 2007-09-14 20:47
  • 533KB
  • 下载
    个人资料
    • 访问:293274次
    • 积分:14684
    • 等级:
    • 排名:第946名
    • 原创:287篇
    • 转载:0篇
    • 译文:2篇
    • 评论:5253条
    您的鼓励,我的动力
    微信加好友
    你只管努力,剩下的交给时光!
    博客专栏
    文章分类