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 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 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
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
js获取url传值的方法
2015/12/18 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
Python采集腾讯新闻实例
2014/07/10 Python
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
python检测IP地址变化并触发事件
2018/12/26 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
《掌声》教学反思
2014/02/23 职场文书
教师节倡议书
2014/08/30 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
先进典型事迹材料
2014/12/29 职场文书
业务员岗位职责
2015/02/03 职场文书
综合测评个人总结
2015/03/03 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
中秋晚会致辞
2015/07/31 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
高中生物教学反思
2016/02/20 职场文书
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
pycharm无法安装cv2模块问题
2022/05/20 Python