JavaScript 表单验证案例 JavaScript 表单验证案例

JavaScript 表单验证案例
JavaScript 表单验证案例

编写 HTML 文件，搭建主体界面

<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript 学习</title>
    <link rel="stylesheet" href="mCSS.css">
</head>
<body>

<h2>增加管理员</h2>
<form action="">
    <table>
        <tbody>
        <tr>
            <td>姓名：</td>
            <td><input type="text" name="username"><span>*</span></td>
            <td><div>5~10个字符以内的字母、数字和下划线组合</div></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="text" name="pwd"><span>*</span></td>
            <td><div>密码为6位数字</div></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <button name="btn" type="button">保存</button>
                <button type="reset">重填</button>
            </td>
            <td></td>
        </tr>
        </tbody>
    </table>
</form>
<script src="mJS.js"></script>

</body>
</html>

　　 JavaScript 表单验证案例
JavaScript 表单验证案例

编写 CSS 文件，进行渲染

td span {
    color: red;
}

/*默认状态*/
td div {
    display: none;
}

/*获得焦点是的状态*/
.tips_info {
    display: block;
}

/*验证失败*/
.tips_error {
    display: block;
    color: red;
    padding-left: 20px;
    background: url("err.png") no-repeat left center;
}


/*验证成功*/
.tips_success{
    display: block;
    padding-left: 20px;
    background: url("ok.png") no-repeat left center;
    width: 0px;
    height: 20px;
    overflow: hidden;
}

编写 JavaScript 脚本文件实现功能

var form = document.forms[0];
// 查找触发事件的元素
var textName = form.username;
var txtPwd = form.pwd;

// 定义两个正则表达式
var namereg = /^w{5,10}$/;
var pwdreg = /^d{6}$/;

// 绑定事件处理函数 ：获得焦点，失去焦点


// 获得焦点 显示提示信息 修改 class 为 tips_info
textName.onfocus = getFocus;  // 不要加小括号！！！
txtPwd.onfocus = getFocus;

// 获得焦点
function getFocus() {
    this.parentElement.nextElementSibling.firstElementChild.className = "tips_info";
}


// 失去焦点 验证格式
textName.onblur = function () {
    verift(this, namereg);
};
txtPwd.onblur = function () {
    // 传参
    verift(this, pwdreg);
};

// 失去焦点验证
function verift(input, reg) {
    // 拿到用户输入内容
    var div = input.parentElement.nextElementSibling.firstElementChild;
    // 验证 输入是否匹配 reg.test()
    if (reg.test(input.value)) {
        // 如果匹配，显示成功 修改class 为 tips_success
        div.className = "tips_success";
        return true;
    } else {
        // 如果不匹配 显示错误 修改 class 为 tips_error
        div.className = "tips_error";
        return false;
    }
}


var btn = form.btn;
btn.onclick = function () {
    // 验证文本框
    var rn = verift(textName, namereg);
    var rp = verift(txtPwd, pwdreg);
    // 判断
    if (rn && rp) {
        form.submit();
    }
}

　　　　 JavaScript 表单验证案例
JavaScript 表单验证案例

JavaScript 表单验证 案例 JavaScript 表单验证 案例

相关推荐

JavaScript 表单验证案例 JavaScript 表单验证案例