在工作中,很多时候都会接触表单,自然就会有表单的验证。有前台验证、后台验证,如果允许,建立前后台都验证,如果选一个的话,建议后台验证,前台验证很容易被越过的。以前对表单的验证,是将整个表单提交到后台,对需要验证的某些字段做验证,但是这样不太好,我们可以使用Ajax技术,只将我们需要验证的字段值提交到后台做验证,这样可以提高效率。下面简单对我工作中用到的做个总结:
1、现在我有个表单,有很多字段,我需要对其中的字段“用户名”做数据重复验证。就是数据库中用户名对应的数据是唯一的。
2、
为这个字段设一个id,方便jquery对这个字段的操作;
onblur 事件:在对象失去焦点时发生,当我们对“用户名”输入数据,鼠标离开的时候触发数据验证事件;
<font> 规定文本的字体、字体尺寸、字体颜色。在“用户名”文本框后面加一个font标签,用于显示验证结果
部分表单:
<td><label>用户名:</label></td>
<td><input id="userName" name="form.userName" type="text" value="${form.userName}" οnblur="userNameJosn();" /> <font id="valideName"color="red"></font></td>
3、js验证代码:
添加字段:
<script>
var valideName="false";
function userNameJosn() {
$.post("jkgl!valideName.action", {
yhm: $("#yhm").val()
}, function(data) {
valideName= data;
if ("true" == data) {
$("#valideName").text("用户已存在!");
} else {
$("#valideJkmc").text(" ");
}
});
}
</script>
修改字段:
<script>
var userName="${form.userName}";//获取表单修改之前的值
var valideName="false";
function userNameJosn() {
var un=$("#userName").val();//获取表单修改后的值
if(un==uaerName){//如果相等,就表示是没有修改,不应该给重复提示
$("#valideName").text("");//提示信息为空
valideName="false";
return false;
}
$.post("jkgl!valideName.action", {
yhm: $("#yhm").val()
}, function(data) {
valideName= data;
if ("true" == data) {
$("#valideName").text("用户已存在!");
} else {
$("#valideJkmc").text(" ");
}
});
}
</script>
我在后台是通过去根据yhm来对比数据库是否有这个数据,返回一个boolean值。
ajax:采用post方式提交,$.post(url,data,callback(function));我采用的是json传递yhm字段值;回调函数:
.val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素
.text("newThing"):替换原有的值