密码修改界面form表单校验

密码更改，用正则表达式校验表单输入的密码。这里用的是Layui。

html：
<form class="layui-form layui-form-pane">

        <div class="layui-form-item" style="height:100px"></div>
        <div class="layui-form-item" style="text-align:center">
            <div class="layui-inline" ">
                <label class="layui-form-label layui-bg-red" style="width:150px">账号：</label>
                <div class="layui-input-inline">
                    <input type="text" id="editAccount" name="editAccount" lay-verify="required" autocomplete="off" class="layui-input" disabled="">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="text-align:center">
            <div class="layui-inline" style="text-align:center;">
                <label class="layui-form-label layui-bg-blue" style="width:150px">旧密码：</label>
                <div class="layui-input-inline">
                    <input type="text" id="editOldPassword" name="editOldPassword" lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入旧密码" >
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="text-align:center">
            <div class="layui-inline">
                <label class="layui-form-label layui-bg-blue" style="width:150px">新密码：</label>
                <div class="layui-input-inline">
                    <input type="text" id="editNewPassword1" name="editNewPassword1" lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入6-12位新密码">
                </div>

            </div>
        </div>
        <div class="layui-form-item" style="text-align:center">
            <div class="layui-inline">
                <label class="layui-form-label layui-bg-blue"  style="width:150px">再次输入新密码：</label>
                <div class="layui-input-inline">
                    <input type="text" id="editNewPassword2" name="editNewPassword2" lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入6-12位新密码" >
                </div>
            </div>
        </div>
        <div class="layui-layer-btn-c" style="text-align:center">
            <button type="button" class="layui-btn layui-btn-normal" id="saveEdit" lay-filter="saveEdit" >保存</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button type="button" class="layui-btn layui-btn-normal" id="cancelEdit">取消</button>
        </div>
    </form>

js使用jQuery，配合正则表达式，进行表单校验：

保存按钮执行函数：
$(function () {
            $("#saveEdit").click(function () {
                var editAccount = document.getElementById("editAccount").value;
                var editOldPassword = document.getElementById("editOldPassword").value;
                var editNewPassword1 = document.getElementById("editNewPassword1").value;
                var editNewPassword2 = document.getElementById("editNewPassword2").value;
                //校验成功，则执行修改密码的后台代码
                    if (PasswordCheck1() && PasswordCheck2()) {
                        $.ajax({
                            //后台代码
                        });
                    else
                        alert("请输入6-12位新密码");

                }                
            });
            //鼠标点击密码输入框之外的地方，焦点执行密码校验函数
            $("#editNewPassword1").blur(PasswordCheck1);
            $("#editNewPassword2").blur(PasswordCheck2);
        });

单哥input密码输入框校验：

function PasswordCheck1() {
            var Password = document.getElementById("editNewPassword1").value;
            //构建正则表达式，规定可输入的密码为6-12位字符
            var reg_username = /^\w{6,12}$/;
            //执行正则校验，符合返回true，不符合返回false
            var flag = reg_username.test(Password);
            if (flag) {
                //用户名合法
                $("#editNewPassword1").css("border", "");
            } else {
                //用户名非法,加一个红色边框
                $("#editNewPassword1").css("border", "1px solid red");
            }
            return flag;
        }

用正则表达式校验输入框，经常用的就是校验用户名，密码，身份证号，手机号等。重点就是要掌握正则表达式的书写。