jquery.validate和MyAjaxForm.js实现表单提交
.error
{
color: red;
}
首先要引入JS库:
<script src="http://www.cnblogs.com/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Scripts/MyAjaxForm.js" type="text/javascript"></script>
<script type="text/javascript">
var validator;
$(function () {
//远程校验用户名是否存在:demo
//blur:只是监听文本框的失去焦点的事件
//change:在失去焦点的时候判断文本是否改变,改变就触发此事件
// $("#txtName").change(function () {
// $("#errormsg").text("");
// //把当前的用户名发送到后台,进行校验是否存在
// $.get("http://www.cnblogs.com/Base/CheckUserNameIsExist.ashx", "txtName=" + $(this).val(), function (data) {
// if (data == 'true') {
// //告诉用户:当前用户名已经存在
// $("#errormsg").text("*user is exist");
// }
// });
// });
validateFrm(); bindFrmSub();
});
//绑定整个表单的提交bindFrmSub();
function bindFrmSub() {
$("#btnSub").click(function () {
//校验一下,当表单提交之前先校验是否通过,如果通过在异步的提交到后台
if(validator.form()) {
//使用插件直接将表单整体提交到后台
$("#frmSubUser").ajaxSubmit({
success: function (str) {
if (str == 'ok') {
window.location = "BuildingList.htm";
} else {
alert("注册失败!");
}
},
error: function (error) { alert(error); },
url: 'Regist.ashx', /*设置post提交到的页面*/
type: "post" /*设置表单以post方法提交*/
//dataType: "json" /*设置返回值类型为文本*/
});
}
});
return false;
}
//校验整个表单validateFrm();
function validateFrm() {
//下面就是我们当前页面的JQ 校验规则
validator = $("#frmSubUser").validate({
rules: {
txtName: {
remote: "http://www.cnblogs.com/Base/CheckUserNameIsExist.ashx"
//required: true,
//minlength: 4
},
txtPwd: {
required: true,
rangelength: [5, 10]
},
txtMail: {
required: true,
email: true //邮箱格式为true
},
txtPwd2: {
equalTo: "#txtPwd"
}
},
messages: {
txtName: "*",
txtPwd: {
required: "*必填",
rangelength: "*只能是5-10个字符"
},
txtMail: "*必填邮箱格式",
txtPwd2: "*两次密码要一致"
}
});
//处理邮箱的校验
//最基本的通过自己手写 js 可以控制校验(最基本的方式)
$("#txtMail").change(function () {
var mailTxt = $(this).val();
//是否是邮箱:正则表达式,失去焦点就会校验
//js:
//一般情况下将校验的逻辑封装到一个scirpt文件里面去。使用的时候引用一下脚本就行了,不用
//在每个表单的页面都重复写校验的逻辑了
//dry
//jq validate
});
}
</script>
<tr>
<td>
用户名:
</td>
<td>
<input type="text" value="" name="txtName" id="txtName" /><span style="color: red;"
id="errormsg"></span>
</td>
</tr>
span显示用户已存在