本例实现了用JQUERY验证表单字段格式是否正确、检查用户名是否存在、用表单提交成功后的返回值显示。
下载示例包：<a href=”http://www.3code.cn/download/jquery-userreg.zip”>jquery-userreg.zip</a>
这是用到的JS代码,下载包里面有：
<script language=”javascript” src=”../js/jquery-1.4.min.js”></script>
<script language=”javascript” src=”../js/jquery.checkform.js”></script>
<script type=”text/javascript” src=”../js/jquery.form.js”></script>
<script language=”javascript”>
$(function(){
$(“#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>
