jquery检测用户是否存在及验证表单

本例实现了用JQUERY验证表单字段格式是否正确、检查用户名是否存在、用表单提交成功后的返回值显示。

下载示例包：<a href=”https://www.3code.cn/download/jquery-userreg.zip”>jquery-userreg.zip</a>

这是用到的JS代码,下载包里面有：

$(“#form1″).valid([
//{ name:”username”,type:”ajax”,message:”用户名没有注册”, url:”abc.php” },
{ name:”username”,type:”username”,simple:”用户名”},
{ name:”password”,type:”password”,simple:”密码”,min:8,max:16},
{ name:”password2″,type:”eq”,simple:”重复密码”, to:”password” },
{ name:”english”,type:”eng”,simple:”英文域”, require:false },
{ name:”chinese”,type:”chn”,simple:”中文域”, require:false },
{ name:”email”,type:”mail”,simple:”邮箱” },
{ name:”url”,type:”url”,message:”地址信息不正确哦!” },
{ name:”checkbox”,simple:”多选” },
{ name:”select”,simple:”选择框” },
]);

//start check username
var txtname = $(“#username”);
//输入文字时文本框样式
txtname.keyup(function() {
var name = $(this).val();
if (name == “”)
$(this).addClass(“txtName”);
else $(this).removeClass(“txtName”);
})
//失去焦点时验证用户名是否可用
$(“#username”).blur(function() {
var name = $(this).val();
$.get(“abc.php?name=” + name, null, function(response) {
$(“#result”).html(response);
})
})
//end check username

//start submit form
var options = {
//target:        ‘#output1’,   // target element(s) to be updated with server response
// beforeSubmit: showRequest, // pre-submit callback
success:       showResponse1, // post-submit callback
url: ‘c1.php’,
type: ‘post’
// other available options:
//url:       url         // override for form’s ‘action’ attribute
//type:      type        // ‘get’ or ‘post’, override for form’s ‘method’ attribute
//dataType: null        // ‘xml’, ‘script’, or ‘json’ (expected server response type)
//clearForm: true        // clear all form fields after successful submit
//resetForm: true        // reset the form after successful submit

// $.ajax options can be used here too, for example:
//timeout: 3000
};
$(‘#form1′).ajaxForm(options);

function showResponse1(responseText, statusText, xhr, $form) {
alert(responseText);
location.href=’user.php’;
}

})

</script>

相关文章