一般我们在做网站开发的时候都会遇到前台表单的验证，以及远程验证：类似于注册的用户名是否被占用，下面贴出个人在学习过程中编写的例子：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>首页</title>
<script type="text/javascript" src="/shop/js/jquery-1.3.js"></script>
<script type="text/javascript" src="/shop/js/jquery.validate.js"></script>
<script type="text/javascript">
$(function(){
//自定义验证方法(方法名，方法体，错误消息)
$.validator.addMethod("checkText",function(value, element,param){
//根据返回true或false来表示验证是否通过
console.log(value);
console.log(element);
console.log(param[0]+"-"+param[1]);
return false;
},"内容不能为空");
$("form").validate({
debug:true,
//文本框在丢失焦点的时候才验证
onkeyup:false,
rules:{
username:{
required:true,
rangelength:[4,12],
remote:{//远程验证，默认在表单会把参数和参数值传递过去
url: "shopAjax_ajaxDemo.action",
type:"post"
}
},
pass:{
required:true,
rangelength:[4,12]
},
passconfirm:{
equalTo:"#pass"
},
email:{
email:true
},
file:{
required:true,
accept:"gif|jpg"
},
address:{
required:true
},
test:{
checkText:[1,16]
}
},
messages:{
username:{
required:"用户名不能为空",
rangelength:$.format("用户名的长度必须在{0}-{1}之间"),
remote:"用户名被占用"
},
pass:{
required:"密码不能为空",
rangelength:$.format("密码的长度必须在{0}-{1}之间")
},
passconfirm:{
equalTo:"密码不一致"
},
email:{
email:"输入的邮箱格式不正确"
},
file:{
required:"文件必须上传",
accept:$.format("上传的文件格式必须为{0}")
},
address:{
required:"请选择地址"
}
}
});
});
</script>
</head>
<body>
<form action="http://www.baidu.com" method="post">
用户名：<input name="username" type="text"></br>
密码：<input name="pass" type="text" id="pass"></br>
确认密码：<input name="passconfirm" type="text"></br>
邮箱: <input type="text" name="email" /><br />
照片:<input type="file" name="file" /><br>
<select name="address">
<option value="广东">广东</option>
<option value="广西">广西</option>
</select></br>
测试：<input type="type" name="test"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
<action name="shopAjax_*" class="registerDemo" method="{1}">
<result name="stream" type="stream"></result>
</action>后台远程验证：
package com.shop.action;
import java.io.ByteArrayInputStream;
import java.io.InputStream;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import com.sun.xml.internal.messaging.saaj.util.ByteInputStream;
@Controller("registerDemo")
@Scope("prototype")
public class RegisterDemo {
private InputStream inputStream;
private String username;
public InputStream getInputStream() {
return inputStream;
}
public void setInputStream(InputStream inputStream) {
this.inputStream = inputStream;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String ajaxDemo(){
if(username.equals("admin")){
System.out.println(username);
inputStream=new ByteArrayInputStream("false".getBytes());
}else{
System.out.println(username);
inputStream=new ByteArrayInputStream("true".getBytes());
}
return "stream";
}
}
</pre>结果显示：<p></p><p><img src="https://img-blog.csdn.net/20140722170147552?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hlbmNodWRvbmdzZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></p><p>如何制定错误消息的显示位置以及远程验证成功后的结果显示，下面用一个完整的例子来显示。</p><p><pre name="code" class="java"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>首页</title>
<script type="text/javascript" src="/shop/js/jquery-1.3.js"></script>
<script type="text/javascript" src="/shop/js/jquery.validate.js"></script>
<script type="text/javascript">
$(function(){
//自定义验证方法(方法名，方法体，错误消息)
$.validator.addMethod("checkText",function(value, element,param){
//根据返回true或false来表示验证是否通过
console.log(value);
console.log(element);
console.log(param[0]+"-"+param[1]);
return false;
},"内容不能为空");
$("form").validate({
debug:true,
//文本框在丢失焦点的时候才验证
onkeyup:false,
rules:{
username:{
required:true,
rangelength:[4,12],
remote:{//远程验证，默认在表单会把参数和参数值传递过去
url: "shopAjax_ajaxDemo.action",
type:"post"
}
},
pass:{
required:true,
rangelength:[4,12]
},
passconfirm:{
equalTo:"#pass"
},
email:{
email:true
},
file:{
required:true,
accept:"gif|jpg"
},
address:{
required:true
},
test:{
checkText:[1,16]
}
},
messages:{
username:{
required:"用户名不能为空",
rangelength:$.format("用户名的长度必须在{0}-{1}之间"),
remote:"用户名被占用"
},
pass:{
required:"密码不能为空",
rangelength:$.format("密码的长度必须在{0}-{1}之间")
},
passconfirm:{
equalTo:"密码不一致"
},
email:{
email:"输入的邮箱格式不正确"
},
file:{
required:"文件必须上传",
accept:$.format("上传的文件格式必须为{0}")
},
address:{
required:"请选择地址"
}
},
errorPlacement:function(error,element){//跟一个函数,可以自定义错误放到哪里
element.parent("td").next().html(error);
}
,
success:function(label){//验证成功后捆版的函数，参数是包含了错误消息的标签默认是label
$(label).html(" ");
$(label).attr("class","success");
alert($(label).attr("class"));
}
});
});
</script>
<style type="text/css">
/**
错误消息的样式
*/
form label{
color:red;
background-image: url("image/error.png");
background-repeat:no-repeat;
padding-left:25px;
}
/**
成功消息的样式
*/
.success{
background-repeat:no-repeat;
padding-left:25px;
background-image: url("image/right.png");
}
</style>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<table border="1" width="600px">
<tr>
<td>用户名：</td>
<td><input name="username" type="text"></br></td>
<td></td>
</tr>
<tr>
<td>密码：</td>
<td><input name="pass" type="text" id="pass"></br></td>
<td> </td>
</tr>
<tr>
<td>确认密码：</td>
<td><input name="passconfirm" type="text"></br></td>
<td></td>
</tr>
<tr>
<td>邮箱: </td>
<td><input type="text" name="email" /><br /></td>
<td> </td>
</tr>
<tr>
<td>照片:</td>
<td><input type="file" name="file" /><br></td>
<td> </td>
</tr>
<tr>
<td>地址</td>
<td><select name="address">
<option value="广东">广东</option>
<option value="广西">广西</option>
</select></br>
</td>
<td> </td>
</tr>
<tr>
<td>测试：</td>
<td><input type="type" name="test"><br></td>
<td> </td>
</tr>
<tr>
<td colspan="3" align="center"><input type="submit" value="提交"></td>
</tr>
</table>
</form>
</body>
</html>
显示的结果：
3096
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
