js中判断用户输入的值是否为空的简单实例


Posted in Javascript onDecember 23, 2013

在js中判断用户输入的值是否为空,这是大家用得非常多的. 这没有什么好写的. 而我却写了. 原因只是自以为是的认为我的这些代码写得不错, 供大家参考一下.

这是摘自的我一个项目的中的用户注册页面.对于大多数人来说,这都几乎是100%经历过的.
贴代码吧,这些代码都是用js写的. 不难,很容易看懂. 看的时候,只要区别两个js类就行了.
前台页面代码:reguser.aspx

<%@ Page language="c#" Codebehind="RegUser.aspx.cs" AutoEventWireup="false" Inherits="Enterprise.Web.RegUser" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
    <head>
        <title>用户注册</title>
        <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
        <meta name="CODE_LANGUAGE" Content="C#">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
        <LINK rel="stylesheet" type="text/css" href="/CSS/EnterpriseWebSite.css">
        <script src="/js/CommonFunction.js" ></script>
        <script>
            var reg    = {};
            reg.userName    = '';
            reg.password    = '';
            reg.confirmPassword    = '';
            reg.question    = '';
            reg.answer    = '';
            reg.url    = '';
            reg.sex    = 1;
            reg.email    = '';
            reg.tel    = '';
            reg.mobile    = '';
            reg.qq    = '';
            reg.address    = '';
            reg.postalcode    = '';
            reg.form    = null;            function btnSubmit_onclick()
            {
                reg.form    = document.forms[0];
                var comFun    = new commonFunction();
                if(!comFun.checkIsEmpty(reg.form))
                {
                    return false;
                }
                if(comFun.$getElementById('txtPassword').value!=comFun.$getElementById('txtConfirmPassword').value)
                {
                    alert('两次密码输入不一致');
                    comFun.$getElementById('txtConfirmPassword').select();
                    return false;
                }
                reg.userName    = comFun.$getElementById('txtUserName');
                reg.password    = comFun.$getElementById('txtPassword');
                reg.question    = comFun.$getElementById('txtQuestion');
                reg.answer        = comFun.$getElementById('txtAnswer');
                reg.url            = comFun.$getElementById('txtUrl');
                reg.email        = comFun.$getElementById('txtEmail');
                reg.tel            = comFun.$getElementById('txtTel');
                reg.mobile        = comFun.$getElementById('txtMobile');
                reg.qq            = comFun.$getElementById('txtQQ');
                reg.address        = comFun.$getElementById('txtAddress');
                reg.postalcode    = comFun.$getElementById('txtPostalcode');
                var es    = comFun.$getElementsByName('sex');
                var eL    = es.length;
                for(var i=0; i<eL; i++)
                {
                    var    e    = es[i];
                    if(e.checked)
                    {
                        reg.sex    = e.value;
                        break;
                    }
                }
                RegUser.Reg(reg.userName.value, reg.password.value, reg.question.value, reg.answer.value, reg.url.value, reg.sex.value, reg.email.value, reg.tel.value, reg.mobile.value, reg.qq.value, reg.address.value, reg.postalcode.value, callback_Reg);
            }
            function callback_Reg(res)
            {
                var rv    = res.value;
                if(rv)
                {
                    alert('注册成功!');
                    window.location.href='/Default.aspx';
                }
                else
                {
                    alert('有错误发生,注册失败!有可能是用户名或者域名被别人注册过了!');
                }
            }
            // 检测用户名的域名是否被其它用户注册过了
            function checkIsRegistered(obj, errorS, t)
            {
                var v    = obj.value;
                var rv    = RegUser.CheckIsRegistered(v, t).value;
                if(rv)
                {
                    alert(errorS);
                    obj.select();
                    return false;
                }
            }
        </script>
    </head>
    <body MS_POSITIONING="GridLayout">
        <form id="Form1" method="post" runat="server">
            <table width="98%" border="0" align="center" cellpadding="3" cellspacing="0">
                <tr>
                    <td width="16%"><div align="right">用户名:</div>
                    </td>
                    <td width="84%"><input type="text" id="txtUserName" onblur="checkIsRegistered(this, '该用户名已经被注册,请使用其它的!', 1)" maxlength="15" isRequired="true" isValidate="true" errorSForEmpty="用户名不能为空!" errorSForValidate="匹配出错!以字母开头,允许3-16字节,允许字母数字下划线以及许可的安全符号!" validatePattern="/^[a-zA-Z][a-zA-Z0-9_$%]{2,15}$/" title="用户名必须填写!"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right">密码:</div>
                    </td>
                    <td><input type="password" id="txtPassword" maxlength="15" isRequired="true" isValidate="true" errorSForEmpty="密码不能为空!" errorSForValidate="匹配出错!要求3-16字节,允许字母数字下划线以及许可的安全符号!!" validatePattern="/^[a-zA-Z0-9_$%]{2,15}$/" title="密码必须填写!"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right">确认密码:</div>
                    </td>
                    <td><input type="password" id="txtConfirmPassword" isRequired="true" errorSForEmpty="确认密码不能为空!"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right">密码提示问题:</div>
                    </td>
                    <td><input type="text" id="txtQuestion" maxlength="50" isRequired="true" isValidate="true" errorSForEmpty="密码提示问题没有填写!" errorSForValidate="长度必须在8-50个字之间且不得有空格!" validatePattern="/\S{8,50}/" title="密码提示问题必须填写!"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right">密码问题答案:</div>
                    </td>
                    <td><input type="text" id="txtAnswer" maxlength="50" isRequired="true" isValidate="true" errorSForEmpty="密码问题答案没有填写!" errorSForValidate="长度必须在8-50个字之间且不得有空格!" validatePattern="/\S{8,50}/" title="密码问题答案必须填写!"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right">站点Url:</div>
                    </td>
                    <td><input type="text" id="txtUrl" onblur="checkIsRegistered(this, '该Url已经被注册,请使用其它的!', 2)" maxlength="20" isRequired="true" isValidate="true" errorSForEmpty="站点Url不能为空!" errorSForValidate="站点Url格式不对!" validatePattern="/^[a-zA-Z0-9]{1,20}$/" title="站点Url必须填写!"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right">性别:</div>
                    </td>
                    <td><input type="radio" id="boy" name="sex" value="1" checked>男  <input type="radio" id="girl" name="sex" value="0">女</td>
                </tr>
                <tr>
                    <td><div align="right">Email:</div>
                    </td>
                    <td><input type="text" id="txtEmail" isValidate="true" errorSForValidate="Email格式不正确!" validatePattern="/^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,3}|[0-9]{1,3})(\]?)$/"></td>
                </tr>
                <tr>
                    <td><div align="right">固定电话:</div>
                    </td>
                    <td><input type="text" id="txtTel" isRequired="true" isValidate="true" errorSForEmpty="固定电话不能为空!" errorSForValidate="固定电话格式不对!请使用0592-5555555的格式!" validatePattern="/^(\d{3}-|\d{4}-)?(\d{8}|\d{7})$/" title="固定电话必须填写!"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right">移动电话:</div>
                    </td>
                    <td><input type="text" id="txtMobile" isValidate="true" errorSForValidate="移动电话格式不正确!" validatePattern="/^1\d{10}$/"></td>
                </tr>
                <tr>
                    <td><div align="right">QQ:</div>
                    </td>
                    <td><input type="text" id="txtQQ" isValidate="true" errorSForValidate="QQ格式不正确!" validatePattern="/^[1-9]*[1-9][0-9]*$/"></td>
                </tr>
                <tr>
                    <td><div align="right">住址:</div>
                    </td>
                    <td><input type="text" id="txtAddress"></td>
                </tr>
                <tr>
                    <td><div align="right">邮编:</div>
                    </td>
                    <td><input type="text" id="txtPostalcode" maxlength="6" isValidate="true" errorSForValidate="邮编不正确!" validatePattern="/^\d{6}/"></td>
                </tr>
                <tr>
                    <td><div align="right">操作:</div>
                    </td>
                    <td><input type="button" value="注册" id="btnSubmit" onclick="btnSubmit_onclick()">  <input type="reset" value="重置"></td>
                </tr>
            </table>
        </form>
    </body>
</html>

在上面的代码中,有包含了一个CommonFunction.js文件,下面这是他的内容:
/***********************************************************
*
*    公共js函数
*
***********************************************************/
function commonFunction()
{
    // check value is null or empty
    this.checkIsEmpty    = function(obj)
    {
        var flag    = true;
        for(var i=0; i<obj.length; i++)
        {
            var e    = obj.item(i);
            if(e.isRequired)
            {    
                if(e.value=='')
                {
                    alert(e.errorSForEmpty);
                    e.focus();
                    flag    = false;
                    break;
                }
            }            if(e.isValidate)
            {
                if(this.checkValidate(e)==false)
                {
                    alert(e.errorSForValidate);
                    e.select();
                    e.focus();
                    flag    = false;
                    break;
                }
            }
        }
        return flag;
    }
    // check value is validate
    this.checkValidate    = function(e)
    {
        var v    = e.value;
        if(v!='')
        {
            return this.checkReg(e.validatePattern, v);
        }
    }
    // regexp validate
    this.checkReg    = function(pattern, value)
    {
        pattern    = pattern.substring(1, pattern.length-1);
        var reg    = new RegExp(pattern);
        if(!reg.test(value))
        {
            return false;
        }
    }
    // return an Element By id object for what id.
    this.$getElementById    = function(id)
    {
        var e    = document.getElementById(id);
        if(e!='undefined')
        {
            return e;
        }
        return;
    }
    // return an Element By name object for what id.
    this.$getElementsByName    = function(id)
    {
        var e    = document.getElementsByName(id);
        if(e!='undefined')
        {
            return e;
        }
        return;
    }
}

贴一张效果图片:

js中判断用户输入的值是否为空的简单实例

Javascript 相关文章推荐
easyui Draggable组件实现拖动效果
Aug 19 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
论JavaScript模块化编程
Mar 07 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
关于uniApp editor微信滑动问题
Jan 15 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
js中判断对象是否为空的三种实现方法
Dec 23 #Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 #Javascript
js禁止回车提交表单的示例代码
Dec 23 #Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 #Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 #Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 #Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 #Javascript
You might like
判断PHP数组是否为空的代码
2011/09/08 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
JS实现随机点名器
2020/04/12 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
Python中返回字典键的值的values()方法使用
2015/05/22 Python
python实现ip代理池功能示例
2019/07/05 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
Django自带的用户验证系统实现
2020/12/18 Python
创业计划书如何吸引他人眼球
2014/01/10 职场文书
二手书店创业计划书
2014/01/16 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
甜点店创业计划书
2014/01/27 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
初中成绩单评语
2014/12/29 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
MySQL 数据 data 基本操作
2022/05/04 MySQL