`

jquery-validate示例使用方法

阅读更多
## 示例使用方法

<form class="form-horizontal m-t" id="signupForm">
	<div class="form-group margin-bottom-20">
		<label class="col-sm-3 control-label required">云信息:</label>
		<div class="col-sm-8">
			<select id="cloudId" name="cloudId"  class="chosen-choices" data-placeholder="请选择云" onchange="loadInstanceParam()">
				<option value="" selected>请选择云</option>
				<option th:each="c:${clouds}" th:value="${c.cloudId}" th:text="${c.cloudName}"></option>
			</select>
		</div>
	</div>
	<div class="form-group margin-bottom-20">
		<label class="col-sm-3 control-label required">云服务器名称:</label>
		<div class="col-sm-8">
			<input id="instanceName" name="instanceName" class="form-control" type="text">
		</div>
	</div>
	<div class="form-group margin-bottom-20">
		<label class="col-sm-3 control-label">密钥名称:</label>
		<div class="col-sm-8">
			<select id="keypairName" name="keypairName" data-placeholder="请选择密钥" class="chosen-choices" >
				<option value="" selected>请选择密钥</option>
			</select>
		</div>
	</div>
	<div class="form-group margin-bottom-20">
		<label class="col-sm-3 control-label">密码:</label>
		<div class="col-sm-8">
			<div class="input-group">
				<input id="adminPass" name="adminPass" placeholder="请输入密码,密码必须包含数字、字母,特殊字符包含!@#.$%^&*(),长度不能小于6位大于20位" class="form-control" type="password">
				<span class="input-group-addon"></span>
				<i class="fa fa-eye fa-showeye" style="position: absolute; cursor: pointer; padding: 10px; z-index: 4;"></i>
			</div>
		</div>
	</div>
	<div class="form-group text-center">
		<button type="button" class="btn btn-default" id="closeLayer">取消</button>
		<button type="submit" class="btn btn-primary">确定</button>
	</div>
</form>



var passRexge = /^(?=.*[0-9])(?=.*[a-zA-Z])[0-9a-zA-Z!@#\.$%^&*()]{6,20}$/;

$().ready(function() {
	validateRule();  // 初始化
});

$.validator.setDefaults({
	submitHandler: function() {
		save();
	}
});

// 初始化方法
function validateRule() {
	var icon = "<i class='fa fa-times-circle'></i> ";
	$("#signupForm").validate({
		errorElement: "em",  // 报错DOM节点
		ignore: ":hidden:not(select)", // 忽略hidden
		rules: {
			cloudId: {
				required: true
			},
			instanceName: {
				required: true
			},
			keypairName: {
				required: true
			},
			adminPass: {
				required: true,
				minlength: 6,
				maxlength: 20,
				passRexge: true,
			}
		},
		messages: {
			cloudId: {
				required: icon + "请选择云信息"
			},
			instanceName: {
				required: icon + "请输入实例名称"
			},
			keypairName: {
				required: icon + "请选择密钥"
			},
			adminPass: {
				required: icon + '请输入密码',
				minlength: icon + '密码不能小于6位',
				maxlength: icon + '密码不能大于20位',
				passRexge: icon + '密码格式有误,密码必须包含数字、字母,特殊字符包含!@#$%^&*().'
			}
		}
	})
}

$('body').on('change', '#keypairName', function (e) {
	var keypair = $(this).find('option:selected').val();
	if (keypair) {
		$("#adminPass").rules('remove','required');   // 取消 adminPass的required
		$('#keypairName-error').text('');
		$('#adminPass-error').text('');
	} else {
		$("#adminPass").rules('add',{ required: true });  // 添加 adminPass的required:true
	}
}).on('blur', '#adminPass', function (e) {
	var pass = $(this).val();
	if (pass) {
		$("#keypairName").rules('remove','required');  // 取消 keypairName的required
		$('#keypairName-error').text('');
		$('#adminPass-error').text('');
	} else {
		$("#keypairName").rules('add',{ required: true }); // 添加 keypairName的required:true
	}
});

// 自定义方法:passRexge
jQuery.validator.addMethod("passRexge", function(value, element) {
    var length = value.length;
    return this.optional(element) || (passRexge.test(value));
}, icon + "格式错误,最少包含1个字母,1个数字,不能包含中文字符,长度6到20");


分享到:
评论

相关推荐

    jquery-validate前台验证框架,带详细使用方法

    根据给定的信息,本文将详细介绍jquery-validate前端验证框架的相关知识点,包括其基本概念、使用方法以及部分具体的验证规则实现。 ### 一、jquery-validate简介 `jquery-validate`是一款基于jQuery的强大表单...

    Jquery-validate表单js源文件与使用文档,让你轻松运用jquery进行表单校验各种表单

    本文将详细介绍jQuery-validate的使用方法和核心知识点,帮助开发者无论新手还是老手都能快速上手。 一、jQuery-validate简介 jQuery-validate是基于jQuery的插件,它的主要任务是对HTML表单进行验证。该插件提供...

    AmezeUI框架+jquery-validate

    这个项目中的"AmazeUI+jquery-validate"压缩包文件可能包含了这些资源文件、示例代码以及可能的配置文件,帮助开发者快速理解和应用这个组合。开发者可以通过学习和实践,掌握如何将这两种工具有效结合,以创建高效...

    基于Bootstrap与jQuery-validate的个人封装检验框架demo

    本项目"基于Bootstrap与jQuery-validate的个人封装检验框架demo"是一个很好的实践示例,展示了如何将这两个强大的库结合使用,以创建具有出色UI和用户体验的验证框架。 Bootstrap是由Twitter开发的一个开源前端框架...

    前端项目-jquery-validate.zip

    3. **demo**:演示示例,展示了如何在实际项目中使用 `jquery-validation` 进行表单验证。 4. **docs**:文档目录,提供了详细的 API 参考和使用指南。 5. **Gruntfile.js** 和 **package.json**:这些是构建工具...

    jquery-form-validate

    &lt;title&gt;jQuery Form Validate 示例 &lt;script src="https://code.jquery.com/jquery-3.x.y.min.js"&gt;&lt;/script&gt; &lt;script src="jquery-form-validation-1.2.0/jquery.validate.min.js"&gt; ...

    jquery和jquery-validate

    1. **安装**:要使用jQuery Validate,需先引入jQuery库(如`jquery-1.4.min.js`),然后引入jQuery Validate插件(如`jquery.validate.js`)及对应的本地化文件(如`jquery.validate.messages_cn.js`)以支持中文...

    jquery-form-validate.1.2.zip

    三、使用方法 1. 引入依赖:首先,确保页面中已经引入了jQuery库,然后引入jQuery Form Validate的JS和CSS文件。 2. 初始化插件:通过JavaScript代码,为需要验证的表单添加插件的初始化代码。 ```javascript $...

    jquery-validate验证框架使用详解及JS文件

    这个压缩文件可能包含了完整的`jQuery Validate`库,包括各种语言的错误消息文件,以及可能的示例或配置文件。解压后,可以根据项目需求选择合适的文件引入。 总结,`jQuery Validate`是一个强大且灵活的前端验证...

    Jquery-validate扩展方法(验证空格)

    在本主题中,我们将深入探讨如何使用 `jQuery Validate` 进行表单验证,以及如何扩展验证方法以验证空格。 ### jQuery Validate 的基本使用 首先,确保在页面中引入了 `jQuery` 和 `jQuery Validate` 插件的 ...

    jquery-validate 表单验证

    `jQuery Validate` 是一个强大的 JavaScript 库,专为 jQuery 框架设计,用于实现高效、灵活且易于使用的表单验证。它可以帮助开发者创建各种复杂的验证规则,确保用户输入的数据符合预设的要求,从而提高网站的安全...

    FormValidator.zip(使用jquery-validate实现注册界面表单验证)

    这个示例是学习和参考 `jQuery Validate` 的一个好起点。通过分析和修改源码,你可以理解如何根据实际需求定制表单验证逻辑,提升用户体验,同时保证数据质量。在实际项目中,还可以结合服务器端验证,形成双层防护...

    jquery-validate 验证插件

    下面将详细介绍`jQuery Validate`插件的核心概念、功能、使用方法以及一些常见配置和规则。 ### 核心概念 1. **验证规则(Rules)**:`jQuery Validate`通过设置验证规则来指定输入字段必须满足的条件,如非空、...

    jQuery-validation-1.14.0 官方源代码(2015.09.13)

    `lib`目录可能包含库的其他组件或依赖,而`demo`目录则提供了示例代码,帮助开发者快速理解和学习如何使用jQuery-validation。 在实际应用中,开发者可以通过以下步骤集成jQuery-validation: 1. 引入jQuery和...

    jquery-validate

    8. **demo**:演示示例,通常用于展示如何配置和使用`jQuery Validate`插件,开发者可以通过查看和运行这些例子来学习如何应用验证规则。 使用`jQuery Validate`时,你需要在HTML中指定验证规则,这通常通过添加...

    Jquery(Validate-Form)使用方法[张振华.Jack]

    ### Jquery(Validate-Form)使用方法详解 #### 一、Jquery Validate 概述 Jquery Validate 是一个非常流行的前端表单验证插件,它由 Jörn Zaefferer 编写和维护,他是 jQuery 团队的一员,同时也是 jQuery UI 的...

    jquery-validation-1.11.1.zip

    这是一个Markdown格式的文档,通常包含项目的基本介绍、安装指南、使用方法和常见问题解答等内容。通过阅读此文件,我们可以快速了解`jquery-validation`的基本用法和特性,为后续的开发工作打下基础。 `test`目录...

    jquery validate依赖包及其帮助文档.rar

    本篇文章将深入探讨jQuery Validate的依赖、核心功能、使用方法以及相关文档资源。 首先,jQuery Validate依赖于jQuery库,这意味着在使用该插件之前,你需要确保页面已经引入了jQuery。在项目中,你可以通过CDN...

    jquery validate例子

    本篇文章将深入探讨jQuery Validate插件的基本概念、主要功能以及一个实际的应用示例。 jQuery Validate插件的安装和引入相对简单,只需在HTML文件中包含jQuery库和jQuery Validate的JS文件即可。通常,我们会通过...

Global site tag (gtag.js) - Google Analytics