jQuery Validate校验

概念：

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。

理解：

该校验方法作用于表单，能够简单快速设置校验规则，同时更好编写提示信息。

所需要的js：

html代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>login</title>
<script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.validate.min.js}" ></script>
<script type="text/javascript" th:src="@{/js/additional-methods-common.js}" ></script>
<script th:src="@{/js/blog-validate.js}" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" th:src="@{/css/bootstrap.min.css}">
<link rel="stylesheet" type="text/css" th:src="@{/css/bootstrap.css}">

</head>
<body>
  <form class="am-form am-form-horizontal yf-form-tips add-form">
                <div class="am-form-group am-g-collapse">
                    <label for="addFormName" class="am-u-sm-2 am-form-label">用户名: </label>
                    <div class="am-u-sm-10 yf-pl10">
                        <input type="text" id=""  name="addFormName" placeholder="请输入您的用户名" class="" maxlength="20">
                        <span class="yf-error-tip"></span>
                    </div>
                </div>
                <div class="am-form-group am-g-collapse">
                    <label for="addFormName" class="am-u-sm-2 am-form-label">密码: </label>
                    <div class="am-u-sm-10 yf-pl10">
                        <input type="password" id="password1"  name="addFormPass1" placeholder="请输入您的密码" class="" maxlength="20">
                        <span class="yf-error-tip"></span>
                    </div>
                </div>
                <div class="am-form-group am-g-collapse">
                    <label for="addFormName" class="am-u-sm-2 am-form-label">确认密码: </label>
                    <div class="am-u-sm-10 yf-pl10">
                        <input type="password" id=""  name="addFormPass2" placeholder="请再次输入您的密码" class="" maxlength="20">
                        <span class="yf-error-tip"></span>
                    </div>
                </div>
                <div class="am-form-group am-g-collapse">
                    <div class="am-u-sm-offset-2 yf-pl10">
                        <button type="submit" class="am-btn am-btn-primary" onclick="submitInfo()">提交</button>
                    </div>
                </div>
                
            </form>
</body>
</html>

jquery:

	//表单验证规则
	var formValid = $(".add-form").validate({
		rules: {
			"addFormName":{
				"required":true,		//必填字段
				"minlength":2
			},
			"addFormPass1":{
				"required":true		
			},
			"addFormPass2":{
				"required":true,
				"equalTo": "#password1"		//输入值必须和 #password1 相同
			},
		},
		messages: {
			"addFormName":{
				"required":"用户名不能为空哦",
				"minlength":"用户名不能太短哦"
			},
			"addFormPass1":{
				"required":"密码不能为空哦"
			},
			"addFormPass2":{
				"required":"确认密码不能为空哦",
				"equalTo":"两次输入的密码不一致哦"
			},                                         
		},
		errorPlacement:function(error,element) {
			error.appendTo(element.siblings(".yf-error-tip"));
		}
	});
	
	//提交前开始验证
	var submitInfo = function(){
		if($('.add-form').valid()){
			alert('恭喜你，验证通过了！');
		};
	}

猜你喜欢