JQuery实现表单验证并使错误数据其无法提交到数据库

在项目开发的时候，我们经常要对用户传入数据库的表单数据进行验证，例如注册时候的账号密码，而验证分为前端验证与后端验证，能在前端完成的验证工作就不要让后端插手了。

本篇笔记以修改密码为例子，界面如下：

密码表单的 html代码，设置好id：

<input id="userpass" name="user.password" value="#(user.password??)" required>

在同一个html文件下，添加jquery代码：

<script>
$(document).ready(function(){
	$("#save").click(function(){
		var str=document.getElementById("userpass").value;
		var res;
		if(/^(?![0-9a-zA-Z]+$)(?![a-zA-Z@#$%]+$)(?![0-9@#$%]+$)[0-9A-Za-z@#$%]{6,16}$/.test(str)==false){
			res="密码格式错误！"
			event.preventDefault(); //取消默认应答
	        event.stopPropagation();//阻止冒泡到父元素
		}else{
			res="密码修改成功！"
		}
			alert(res);
		});
});
</script>

上面的代码是通过id得到用户输入的值，然后if、else判断是否符合正则表达式。对于不正确的数据，设置好要alert的信息，然后通过两个event事件取消submit，这样也就不会传入到数据库了，对于对的数据，直接设置要alert的信息即可。

希望能帮到你～