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 相关文章推荐
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
全面解析JavaScript Module模式
Jul 24 Javascript
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
基于文本的搜索
2006/10/09 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
mouse_on_title.js
2006/08/25 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
javascript时间差插件分享
2016/07/18 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
jQuery实现增删改查
2020/12/22 jQuery
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
学习python的几条建议分享
2013/02/10 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
区域销售经理职责
2013/12/22 职场文书
中学门卫岗位职责
2013/12/26 职场文书
益达广告词
2014/03/14 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书