6.JqueryValidate验证实例2

最新推荐文章于 2020-08-31 16:22:42 发布
booleandev
最新推荐文章于 2020-08-31 16:22:42 发布
阅读量414
点赞数
CC 4.0 BY-SA版权
分类专栏： JqueryValidate 文章标签： JqueryValidate Jquery表单验证 Jquery验证表单验证
本文链接：https://blog.youkuaiyun.com/Booleaning/article/details/78516886
JqueryValidate 专栏收录该内容
6 篇文章
订阅专栏
1.代码

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="renderer" content="webkit"/>
	<title>账号设置</title>
	
	<link href="${base}/resources/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	<link href="${base}/resources/admin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
	<link href="${base}/resources/admin/css/animate.css" rel="stylesheet">
	<link href="${base}/resources/admin/css/style.css?v=4.1.0" rel="stylesheet">
	<link href="${base}/resources/admin/css/iCheck/custom.css" rel="stylesheet">
	<script type="text/javascript" src="${base}/resources/admin/js/jquery.min.js"></script>
	<script type="text/javascript" src="${base}/resources/admin/js/jquery.validate.js"></script>
	<script type="text/javascript" src="${base}/resources/admin/js/common.js"></script>
	<script type="text/javascript" src="${base}/resources/admin/js/input.js"></script>
	<script type="text/javascript" src="${base}/resources/admin/js/plugins/layer/layer.min.js"></script>
	
	<script type="text/javascript">
	$().ready(function() {
	
	    var $inputForm = $("#inputForm");
	    
	    $.validator.addMethod("requiredTo", 
	        function(value, element, param) {
	            var parameterValue = $(param).val();
	            if ($.trim(parameterValue) == "" || ($.trim(parameterValue) != "" && $.trim(value) != "")) {
	                return true;
	            } else {
	                return false;
	            }
	        },
	        "必填"
	    );
	    
	    // 表单验证
	    $inputForm.validate({
	        rules: {
	            username:{
	                required: true,
	                remote: {
	                    url: "${base}/admin/checkUsername.jhtml",
	                    cache: false
	                }
	            },
	            currentPassword: {
	                requiredTo: "#password",
	                remote: {
	                    url: "check_current_password.jhtml",
	                    cache: false
	                }
	            },
	            password: {
	                required: true,
	                pattern: /^[^\s&\"<>]+$/,
	                minlength: 4,
	                maxlength: 20
	            },
	            rePassword: {
	                required: true,
	                equalTo: "#password"
	            },
	            name: {
	                required: true,
	            }
	        },
	        messages: {
	            password: {
	                pattern: "非法字符"
	            },
	            username:{remote:"用户名已存在"},
	        }
	    });
	    
	});
	</script>
	</head>
	<body class="gray-bg">
	
	    <div class="wrapper wrapper-content animated fadeInRight">    
	        <div class="ibox">
	            <!--面包屑-->
	            <div class="ibox-title">
	                <a href="${base}/admin/list.jhtml">
	                    <small>列表</small>
	                </a>
	                 » 
	                <small>添加</small>
	            </div>
	            
	            <div class="ibox-content">
	                <form id="inputForm" action="${base}/admin/save.jhtml" method="post" class="form-horizontal">
	                
	                    <div class="form-group">
	                        <div class="col-sm-2 text-right"><span style="color: #ff6d6d;">*</span>用户名:</div>
	                        <div class="col-sm-4">
	                            <input type="text" name="username" class="text" maxlength="20" />
	                        </div>
	                        <div class="col-sm-2 text-right"><span style="color: #ff6d6d;">*</span>姓名:</div>
	                        <div class="col-sm-4">
	                            <input type="text" name="name" class="text" maxlength="20" />
	                        </div>
	                    </div>
	                    <div class="hr-line-dashed"></div>
	                    
	                    
	                    
	                    <div class="form-group">
	                        
	                        <div class="col-sm-2 text-right"><span style="color: #ff6d6d;">*</span>密码: </div>
	                        <div class="col-sm-4">
	                            <input type="password" id="password" name="password" class="text" maxlength="20" />
	                        </div>
	                        <div class="col-sm-2 text-right"><span style="color: #ff6d6d;">*</span>确认密码: </div>
	                        <div class="col-sm-4">
	                            <input type="password" name="rePassword" class="text" maxlength="20" />
	                        </div>
	                    </div>
	                    <div class="hr-line-dashed"></div>
	                    
	                    
	                    
	                    <div class="form-group">
	                    <div class="col-sm-2 text-right">部门:</div>
	                        <div class="col-sm-4">
	                            <input type="text" name="department" class="text" maxlength="20" />
	                        </div>
	                        
	                        <div class="col-sm-2 text-right">E-mail: </div>
	                        <div class="col-sm-4">
	                            <input type="text" name="email" class="text" maxlength="20" />
	                        </div>
	                    </div>
	                    <div class="hr-line-dashed"></div>
	                    
	                    <div class="form-group">
	                        <div class="col-sm-2 text-right">角色: </div>
	                        <div class="col-sm-4">
	                        <div class="i-checks">
	                            <span class="fieldSet">
	                            [#list roles as role]
	                                <label>
	                                    <input type="checkbox" name="ids" value="${role.id}" />${role.name}
	                                </label>
	                            [/#list]
	                            </span>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="hr-line-dashed"></div>
	                    
	                    
	                    
	                    <div class="form-group actions">
	                    
	                        <div class="col-sm-2 text-right"></div>
	                        <div class="col-sm-10">
	                            <input type="submit" class="btn btn-primary" value="确  定" />
	                            <a class="btn btn-white" href="${base}/admin/list.jhtml">返  回</a>    
	                        </div>
	                    </div>
	                    <div class="hr-line-dashed"></div>
	                    
	                </form>
	            </div>
	            <!--ibox content end-->
	        </div>
	        <!--ibox end-->
	    </div>
	    <script src="${base}/resources/admin/js/iCheck/icheck.min.js"></script>
	    <script>
	                $(document).ready(function () {
	                        $('.i-checks').iCheck({
	                                checkboxClass: 'icheckbox_square-green',
	                                radioClass: 'iradio_square-green',
	                        });
	                });
	        </script>
	</body>
	</html>