jQuery的表单验证插件validate

最新推荐文章于 2024-08-26 12:42:08 发布

原创最新推荐文章于 2024-08-26 12:42:08 发布 · 871 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery #string #email #服务器 #exception

本文介绍如何使用jQuery的validate插件进行表单验证，包括必填项、邮箱格式、URL格式等内置验证规则，并展示了如何自定义验证规则及实现服务器端验证。

一、需要准备的材料

1、jquery.js

2、validate.js

二、valdate内置验证规则

(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10

除了上述内置的验证规则，开发者可以很方便的加上自已的验证规则

三、一个简单的例子

1、html代码

<form id="loginss" action="" method="post">
<input type="text" name="j_username" id="email" value=""/>
<br/><br/>
<input type="password" name="j_password" id="password" />
 <input type="submit"  value="提交">
</form>

2、js代码

$(function(){

    //自定义昵称验证规则
    jQuery.validator.addMethod("nickName", function(value, element){
        return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
    }, "昵称只能由中文，英文字母、数字和下划线组成");


 $("#loginss").validate({
        rules: {
            j_username: {
                required: true,
                email: true
                remote:"url.action"//需要服务器端验证的规则，常用如用户名是否占用
            },
            j_password: {
                required: true
            }
        },
        messages: {
            j_password: {
                required: "请输入密码"
            },
            j_username: {
                required: "请输入邮件地址",
                email: "请输入有效的邮件地址",
                remote:"不合要求"
                }
        }
    });

});

如果不需要服务器端验证，remote这一行可以不要

3、服务器端验证的java代码

package com.mmruy.action;

import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;

public class LoginAction extends ActionSupport {

	private static final long serialVersionUID = 1L;
	private String username;

	@Override
	public String execute() throws Exception {
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/xml;charset=UTF-8");
		response.setHeader("Cache-Control", "no-cache");
		if ("mmluy@126.com".equals(username)) {
			response.getWriter().write("true");
		} else {
			response.getWriter().write("false");
		}

		return null;
	}

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

}