`
云上太阳
  • 浏览: 131355 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

jQuery Validate 验证表达合法性

阅读更多

jQuery Validate 验证表达合法性

                                                                                                        ——我一直不太信任自己的记忆力,所以我把它们都写下来   

下面是实例效果图

 

 虽然html5已经支持用required来进行表单验证,但是体验并不是很好,所以还是推荐jQuery Validation来验证,下面是具体的带,为了方便查看,就全部写在一个文件里了。

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<meta vname=" viewport" width=" device-width;initial-scale=1;"/>
<title>jQuery Validate</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
#regist_content{
	margin-top:10px;
	background:#bbeeff;
	border-radius:10px;
	transition: all 0.7s ease-in-out;

}
#regist_content:hover{
	background:#bbeeff;
	border-radius:10px;
	box-shadow:0 0 8px #333;
}

</style>
</head>

<body class="container ">
<div class="jumbotron">
	<h1>jQuery.validate</h1>
    <p>虽然HTML5已经支持required表单验证,但是体验并不是很好,所以我们推荐jquery Validation组件</p>
    <a class="btn btn-primary" href="http://jqueryvalidation.org/" title="去jQuery.validate.js官网" target="_blank">了解更多</a>
</div>
<div class=" col-xs-offset-4 col-md-4" id="regist_content">
	<form class="" id="commentForm" method="get" action="">
    <div class="form-group ">
      <label for="cname">姓名</label>
      <input class="form-control" id="cname" name="name" minlength="2" type="text" required="required">
    </div>
    <div class="form-group ">
      <label for="cemail">邮箱</label>
		  <input class="form-control" id="cemail_head" type="email" name="email" required>
    </div>
    <p class="form-group ">
      <label for="curl">网址</label>
      <input class="form-control" id="curl" type="url" name="url" required=" required">
    </p>
    <p class="form-group ">
      <label for="ccomment">说明</label>
      <textarea class="form-control" id="ccomment" name="comment" required></textarea>
    </p>
    <p class="form-group text-center">
      <input class=" btn btn-primary" id="submit" class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/jquery-validate/1.14.0/jquery.validate.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>
$("#commentForm").validate();
//推荐做法,将此文件放入 messages_cn.js中
jQuery.extend(jQuery.validator.messages, {
        required: "必选字段",
		remote: "请修正该字段",
		email: "请输入正确格式的电子邮件",
		url: "请输入合法的网址",
		date: "请输入合法的日期",
		dateISO: "请输入合法的日期 (ISO).",
		number: "请输入合法的数字",
		digits: "只能输入整数",
		creditcard: "请输入合法的信用卡号",
		equalTo: "请再次输入相同的值",
		accept: "请输入拥有合法后缀名的字符串",
		maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),
		minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),
		rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
		range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
		max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
		min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});

</script>

</body>
</html>

 

  • 大小: 60.6 KB
4
0
分享到:
评论

相关推荐

    JQueryValidate验证说明

    `jQuery Validate`是一...总之,`jQuery Validate`是一个功能强大的验证工具,能够帮助开发者轻松实现表单数据的验证,提高用户体验,并确保数据的准确性和安全性。通过灵活的配置和扩展,可以适应各种复杂的验证需求。

    jQuery.validate验证

    总的来说,jQuery.validate是JavaScript开发中不可或缺的工具,它简化了表单验证的过程,提高了代码的可读性和维护性。通过深入理解和灵活运用,开发者可以创建出高效且用户友好的表单验证机制。

    jquery+validate.js+验证规则文件

    只验证格式,不验证有效性。 7 number:true 必须输入合法的数字(负数,小数)。 8 digits:true 必须输入整数。 9 creditcard: 必须输入合法的信用卡号。 10 equalTo:"#field" 输入值必须和 #field 相同。 11 accept...

    JQuery Validate插件的验证规则和例子,合成AJAX

    这允许我们在服务器端检查输入数据的合法性,而无需立即提交表单。以下是一个示例: ```javascript $("#myForm").validate({ rules: { fieldName: { required: true, remote: "validate-email.php" // 服务器端...

    jquery-validate 验证插件

    `jQuery Validate`是一个非常流行的JavaScript库,用于在客户端进行表单验证。它是jQuery的一个插件,可以帮助开发者轻松地实现对用户输入数据的有效性检查,从而提高用户体验,减少服务器端的压力。下面将详细介绍`...

    jQuery表单验证大全

    总的来说,jQuery Validate插件以其灵活性和易用性,极大地简化了前端表单验证的工作。通过理解并熟练掌握它的各种规则、方法和配置,开发者可以构建出高效、用户体验良好的表单验证系统。在实际项目中,根据具体...

    validate验证

    在IT行业中,`validate验证`是一个非常重要的环节,特别是在前端开发中,用于确保用户输入的数据是合法、有效和安全的。`jQuery Validate`是一个广泛使用的jQuery插件,它提供了强大的表单验证功能,使得开发者可以...

    jquery.validate 扩展身份证校验方法

    3. **验证地区合法性**: 使用地区代码映射检查身份证号码对应的地区是否合法。 ```javascript if (area[parseInt(idcard.substr(0, 2))] == null) return Errors[4]; ``` 4. **区分15位和18位身份证号码**: ...

    jquery validate.js表单验证的基本用法入门

    jQuery Validate插件是jQuery的一个强大的表单验证模块,用于在客户端对用户输入进行校验。通过它,开发者可以很容易地在网页的表单中添加验证功能,从而提升用户体验。以下是jQuery Validate插件表单验证的基本用法...

    JQuery UI和Validate的应用

    2. **自定义规则**:开发者可以定义自己的验证规则,例如检查邮箱格式、手机号码合法性等。 3. **多国语言支持**:提供多种语言的错误消息,便于全球化应用。 4. **异步验证**:支持通过AJAX进行后台验证,例如检查...

    jQuery验证控件jquery.validate.js使用说明+中文API

    jQuery 验证控件 jquery.validate.js 使用说明 + 中文 API jQuery 验证控件 jquery.validate.js 是一个功能强大且广泛使用的 JavaScript 验证插件,旨在帮助开发者快速实现表单验证功能。下面是 jquery.validate....

    jQuery Validate 表单验证插件使用方法

    ### jQuery Validate 表单验证插件使用方法 在前端开发中,表单验证是一项非常重要的功能,它确保用户提交的数据符合预期的要求。jQuery Validate插件是基于jQuery的一个强大的表单验证库,它提供了多种预定义的...

    jQuery Validate验证框架经典大全

    《jQuery Validate验证框架经典大全》 jQuery Validate是一个强大的表单验证插件,它为开发者提供了简单易用的API,能够方便地对用户输入的数据进行实时校验,确保数据的准确性和完整性。以下是对该框架的详细说明...

    jQuery Validate

    在网页交互中,确保用户输入的数据合法性和完整性至关重要,jQuery Validate就是为了解决这一问题而诞生的。 该插件的基本用法是将`validate`方法应用到HTML表单元素上。例如: ```html &lt;script src="...

    jquery.validate.js表单验证[借鉴].pdf

    jQuery Validate 提供了一系列预定义的验证规则,可以用来检查用户输入是否符合特定条件: 1. **required**: 字段必须有输入。 2. **remote**: 使用 AJAX 调用指定的 URL(如 `check.php`)来验证输入。 3. **email...

    jquery.validate表单验证插件使用方法解析

    开发者只需要在HTML表单元素中添加对应的class,例如`required`表示该字段必填,`email`则用于验证电子邮件地址格式的合法性。举个例子,要求用户填写电子邮件的代码如下: ```html ``` 其次,开发者可以自定义...

    jquery.validate

    `jquery.validate`是一款用于前端页面表单验证的强大插件。它可以帮助开发者快速实现表单字段的有效性检查,提高用户体验的同时减少服务器端的压力。该插件支持多种验证规则,并且可以自定义错误提示信息,使得开发...

    jquery_validate_(验证控件)详解

    **jQuery Validate** 是一个流行的前端表单验证插件,它极大地简化了开发者在前端进行数据验证的工作流程。该插件基于 jQuery 开发,提供了丰富的内置验证规则以及高度可定制化的选项。通过使用此插件,可以快速实现...

Global site tag (gtag.js) - Google Analytics