静态页面表单中js验证

浏览数：30 / 时间：2015年06月09日

　　笔记：

　　onblur事件：onblur 事件会在对象失去焦点时发生。http://www.w3school.com.cn/jsref/event_onblur.asp

　　onkeyup事件：onkeyup 事件会在键盘按键被松开时发生。http://www.w3school.com.cn/jsref/event_onkeyup.asp

　　这两者事件的发生机制截然不同，在用js对表单进行验证的时候，建议大家，尽量用onkeyup，因为交互性好，能够实时反馈用户输入的有效性；

　　js中空字符串“” 是等于false ，大家可以测试下，alert（“”==false）；这点，一定要注意；

　　js方法的返回值，以及return；（跟java、C#等等，一样）。return可以直接跳出方法。

　　对于表单验证，数据ok了，怎么提交，如果数据不对，怎么让表单不提交。

　　如何利用onclick 和onsubmit 以及form.submit方法，以及什么时候用最好；

　　onclick事件：onclick 事件会在对象被点击时发生。请注意， onclick 与 onmousedown 不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。http://www.w3school.com.cn/jsref/event_onclick.asp

　　onsubmit事件：onsubmit 事件会在表单中的确认按钮被点击时发生。http://www.w3school.com.cn/jsref/event_onsubmit.asp

　　form.submit(Html DOM submit):submit() 方法把表单数据提交到 Web 服务器。http://www.w3school.com.cn/jsref/met_form_submit.asp

　　上面的东西，经常用到，参考链接的讲解以及实例

function check() {    // 表单提交时执行, 验证所有表单项
    var bUsername = checkUsername();
    var bPassword = checkPassword();
    var bConfirm = checkConfirm();
    var bEmail = checkEmail();
    var bCity = checkCity();
    var bGender = checkGender();
    var bInterest = checkInterest();
    var result = bUsername && bPassword && bConfirm && bEmail && bCity && bGender && bInterest;
    return result;    // 如果所有表单项都验证成功, 返回true
}

function checkUsername() {
    var value = document.getElementById("username").value;    // 获取input, 获取值
    value = trim(value);                                    // 去掉前后空白
    var span = document.getElementById("usernameMsg");        // 获取SPAN
    var msg = "";                    // 错误消息
    var regex = /^\w{1,10}$/;        // 正则表达式: 字母数字下划线, 1到10位
    if (!value)                        // 判断输入值是否为空    
        msg = "用户名必须填写";        // 如果是空的, 那么修改错误消息
    else if (!regex.test(value))     // 如果不能匹配正则
        msg = "用户名不合法";
    span.innerHTML = msg;            // 把错误消息放入SPAN
    span.parentNode.parentNode.style.color = msg ? "red" : "black";    // 根据是否包含错误提示, 改变tr颜色
    return msg == "";                // 如果没有错误消息, 代表验证成功
}
function checkPassword() {
    var value = document.getElementById("password").value;
    var span = document.getElementById("passwordMsg");
    var msg = "";
    var regex = /^.{6,16}$/;
    if (!value)
        msg = "密码必须填写";
    else if (!regex.test(value))     // 如果不能匹配正则
        msg = "密码不合法";
    span.innerHTML = msg;
    span.parentNode.parentNode.style.color = msg ? "red" : "black";
    return msg == "";
}
function checkConfirm() {
    var confirmValue = document.getElementById("confirm").value;
    var passwordValue = document.getElementById("password").value;
    var span = document.getElementById("confirmMsg");
    var msg = "";
    if (confirmValue != passwordValue)
        msg = "密码必须保持一致";
    span.innerHTML = msg;
    span.parentNode.parentNode.style.color = msg ? "red" : "black";
    return msg == "";
}
function checkEmail() {
    var value = document.getElementById("email").value;
    value = trim(value);
    var span = document.getElementById("emailMsg");
    var msg = "";
    var regex = /^[\w-]+@([\w-]+\.)+[a-zA-Z]{2,4}$/;
    if (!value)
        msg = "邮箱必须填写";
    else if (!regex.test(value))
        msg = "邮箱格式不合法";
    span.innerHTML = msg;
    span.parentNode.parentNode.style.color = msg ? "red" : "black";
    return msg == "";
}
function checkCity() {
    var value = document.getElementById("city").value;
    var span = document.getElementById("cityMsg");
    var msg = "";
    if (!value)
        msg = "城市必须选择";
    span.innerHTML = msg;
    span.parentNode.parentNode.style.color = msg ? "red" : "black";
    return msg == "";
}
function checkGender() {
    var genderArr = document.getElementsByName("gender");
    var span = document.getElementById("genderMsg");
    var msg = "";
    if (!genderArr[0].checked && !genderArr[1].checked)
        msg = "性别必须选择";
    span.innerHTML = msg;
    span.parentNode.parentNode.style.color = msg ? "red" : "black";
    return msg == "";
}
function checkInterest() {
    var interestArr = document.getElementsByName("interest");
    var span = document.getElementById("interestMsg");
    var msg = "";
    if (!interestArr[0].checked && !interestArr[1].checked && !interestArr[2].checked)
        msg = "兴趣必须选择";
    span.innerHTML = msg;
    span.parentNode.parentNode.style.color = msg ? "red" : "black";
    return msg == "";
}

// 利用正则去掉空字符串

function trim(s) { return s.replace(/^\s+|\s+$/g, ""); }

@{
    ViewBag.Title = "Index";
}
<script src="~/Scripts/check.js"></script>
<script type="text/javascript">

</script>

<h2>静态页面表单中js验证</h2>
<body>
    <form action="~/HTML/success.html" method="get" id="form" onsubmit="return check();">
        <table width="500" align="center" cellpadding="5" cellspacing="0">
            <tr>
                <td align="right" style="width:150px">用户名:</td>
                <td>
                    <input type="text" name="username" id="username" onkeyup="checkUsername();">
                    <span id="usernameMsg"></span>
                </td>
            </tr>
            <tr>
                <td align="right">密码:</td>
                <td>
                    <input type="password" name="password" id="password" onkeyup="checkPassword();">
                    <span id="passwordMsg"></span>
                </td>
            </tr>
            <tr>
                <td align="right">确认密码:</td>
                <td>
                    <input type="password" id="confirm" onkeyup="checkConfirm();">
                    <span id="confirmMsg"></span>
                </td>
            </tr>
            <tr>
                <td align="right">邮箱:</td>
                <td>
                    <input type="text" name="email" id="email" onkeyup="checkEmail();">
                    <span id="emailMsg"></span>
                </td>
            </tr>
            <tr>
                <td align="right">城市:</td>
                <td>
                    <select name="city" id="city" onchange="checkCity();">
                        <option value="">-请选择城市-</option>
                        <option value="bj">西二旗</option>
                        <option value="cd">上地</option>
                        <option value="gz">西三旗</option>
                        <option value="sh">望京</option>
                        <option value="wh">回龙观</option>
                        <option value="sz"></option>
                    </select>
                    <span id="cityMsg"></span>
                </td>
            </tr>
            <tr>
                <td align="right">性别:</td>
                <td>
                    <input type="radio" name="gender" value="male" onclick="checkGender();"> 男
                    <input type="radio" name="gender" value="female" onclick="checkGender();"> 女
                    <span id="genderMsg"></span>
                </td>
            </tr>
            <tr>
                <td align="right">兴趣:</td>
                <td>
                    <input type="checkbox" name="interest" value="sing" onclick="checkInterest();"> data2
                    <input type="checkbox" name="interest" value="dance" onclick="checkInterest();"> lol
                    <input type="checkbox" name="interest" value="mahjong" onclick="checkInterest();"> 炉石传说
                    <span id="interestMsg"></span>
                </td>
            </tr>
            <tr>
                <td align="center" colspan="2">
                    <input type="submit" value="提交数据">
                </td>
            </tr>
        </table>
    </form>
</body>

var bUsername = checkUsername();
var bPassword = checkPassword();
var bConfirm = checkConfirm();
var bEmail = checkEmail();
var bCity = checkCity();
var bGender = checkGender();
var bInterest = checkInterest();

上面的方法的返回值是 return msg=="" 。返回的 boolean类型的值。

所以，后面才能用

var result = bUsername && bPassword && bConfirm && bEmail && bCity && bGender && bInterest;
return result; // 如果所有表单项都验证成功, 返回true

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

静态页面表单中js验证