ajax和jsp表单验证,Web中的常用的两种表单验证

今天介绍下web开发中常用的两种表单验证，form提交和ajax提交

form提交

表单是通过form提交时，用户点击提交(input typte="submit")按钮触发form提交

部门：

请选择

部门一

部门二

姓名:

请选择

触发事件 οnsubmit="return check(this.form )" 当check函数返回true的时候正常提交，false则不提交。

function check(form){

var bumen =this.form.dept.value;

var xingming =this.form.xingming.value;

if(bumen==""){

alert("请选择部门");

return false;

}else if(xingming==""){

alert("请选择人名");

return false;

}else{

return true;

}

}

check函数可以带参数也可以不带参数。不带参数的时候 通过js获取到表单项的值判断，如下：

document.getElementById("#").value

document.form.username.value

输入错误的时候提示用alert弹窗不太友好，可以使用div布局在页面显示。

ajax提交

ajax提交页面在编写的时候就不需要form表单了，用户点击提交触发ajax方法提交

下面举一个用户登录验证的例子

点击提交时验证表单项

$("#login").click(function(){

if(!checkPsw($("#psw").val())){

$("#psw").focus();

}else{//格式验证通过后ajax验证登录信息

$.post("login_user.jsp",

{

name:$("#name").val(),

password:$("#psw").val()

},

function(data,status){

if(status=="success"){

if(data.indexOf("成功")<0){

$("#massage_login").html(data);

}else{}

}else{

// $("#massage_add").html("jquery ajax执行出错啦！");

alert("jquery ajax执行出错啦！");

}

});

}

});

验证密码是否符合规则

function checkPsw(a){

reg = /^[a-z0-9]*$/;

if(a.length<3) {

$("#massage_login").html("密码长度不能少于三个字符！");

return false;

} else

if(!reg.test(a)) {

$("#massage_login").html("密码只能由数字和字母组成！");

return false;

} else{

$("#massage_login").html("");

return true;

}

};

用户输入时验证并提示

$("#psw").keyup(

function() {

n=$(this).val().replace(/[ ]/g,"").toLowerCase();

$(this).val(n);

if(!checkPsw(n)){

$(this).focus();

}

});

以上就是网页中表单常用的验证，不足之处欢迎指正！

如需转载，请指明出处！