js密码输入与确认密码验证功能

密码确认密码

标签(空格分隔): 密码验证

带有比较复杂的密码验证方式,比如具备大小写


<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>设备管理系统|密码修改title>
    <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../../node_modules/font-awesome/css/font-awesome.css" rel="stylesheet"/>
    
    <link href="../../node_modules/animate.css/animate.css" rel="stylesheet"/>   
    
    <link href="../css/style.css" rel="stylesheet"/>
head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <form class="form-horizontal" id="modifyPasswordForm">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">原密码label>

                                <div class="col-sm-6">
                                    <input type="password" name="originalPassword" id="originalPassword" class="form-control">
                                div>
                            div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">新密码label>

                                <div class="col-sm-6">
                                    <input type="password" name="newPassword" id="newPassword" class="form-control">
                                div>
                            div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">确认密码label>

                                <div class="col-sm-6">
                                    <input type="password" name="confirmPassword" id="confirmPassword" class="form-control">
                                div>
                            div>
                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <button class="btn btn-primary" id="confirm">确认button>
                                    <a class="btn btn-default" id="cancel">取消a>
                                div>
                            div>
                        form>
                    div>
                div>
            div>
        div>
    div>

    
    <script src="../../node_modules/jquery/dist/jquery.min.js">script>
    <script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js">script>
    <script src="../js/jquery.validate.min.js">script>
    <script src="../../node_modules/layui-layer/dist/layer.js">script>


    
    <script src="../js/content.js">script>
    <script src="../js/modifyPassword.js">script>
body>
html>
 //用户名必须需包含数字和大小写字母中至少两种
    $.validator.addMethod("passwordrule", function(value, element) {
        var userblank = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)[0-9A-Za-z]{6,10}$/;
        return this.optional(element) ||(userblank.test(value));
    }, "需包含数字和大小写字母中至少两种字符的5-10位字符");

    $("#modifyPasswordForm").validate({
        rules: {
            originalPassword: "required",
            newPassword: {
                required: true,
                minlength:6,
                passwordrule: true
            },
            confirmPassword:{
                required: true,
                minlength:6,
                equalTo:"#newPassword"
            }
        },
        messages: {
            originalPassword: "请输入您的原始登陆密码",
            newPassword:{
                required: "请输入您的新密码",
                minlength:"请输入最少为6为字符",
                passwordrule: "为了保证您的账号安全,需包含数字和大小写字母中至少两种字符的6-10位字符!"
            },
            confirmPassword: {
                required: "请输入您的确认密码",
                minlength:"请输入最少为6为字符",
                equalTo:"两次密码输入不一致"

            },
        },



        submitHandler: function(){
            layer.msg("密码修改成功");
        }


    });
    //当点击“取消按钮时执行”
    $('#cancel').click(function () {
    location.reload(true);//刷新当前页面
    });

表单验证这message信息是通过input里name属性获取的而不是id,表单里的提交必须要是button,否则不提交

你可能感兴趣的:(js密码输入与确认密码验证功能)