jquery ajax 表单验证

html 代码

				<form id="add_user" action="" method="post">
					<label >账号:</label><input id="name" name="name" type="text">
					<span class="input_notice" id="name_area">请输入6-20个英文字符和数字！</span> 
					<br> 
					<label >密码:</label><input id="password" name="password" type="text">
					<span class="input_notice" id="password_area">请输入6-20个英文字符和数字！</span> 
					<br> 
					<label >邮箱:</label><input id="email" name="email" type="text"> 
					<span class="input_notice" id="email_area">请输入email!</span> 
					<br> 
					<label >电话:</label><input id="telephone" name="telephone" type="text"> 
					<span class="input_notice" id="telephone_area">请输入11位手机号码！</span> 
					<br> 
					<input class="add_btn" type="submit" value="添加">
				</form>

jquery代码

	// 用户注册 无刷新提交表单
	$(".add_btn").click(function() {
		// 获取input 输入
		var name = $("#add_user #name").val();
		var password = $("#add_user #password").val();
		var email = $("#add_user #email").val();
		var telephone = $("#add_user #telephone").val();

		// ajax 无刷新提交表单
		// 判断账号是否输入正确
		var pattern1 = /^[a-zA-Z0-9]+$/g;
		if ((name == null || name == "")||name.match(pattern1) == null||name.length<6||name.length>20) {
			$("#name_area").html("请输入6-20个英文字符和数字！").css("color", "red");
			return false;
		}else{
			$("#name_area").html("正确！").css("color", "green");
		}
		

		// 判断密码是否输入正确
		var pattern2 = /^[a-zA-Z0-9]+$/g;
		if ((password==null||password =="")||password.match(pattern2)==null||password.length<6||password.length>20) {
			$("#password_area").html("请输入6-20个英文字符和数字！").css("color", "red");
			return false;
		}else{
			$("#password_area").html("正确！").css("color", "green");
		}
		

		// 判断邮箱是否输入正确
		var pattern3 = /@/g;
		if (email == null || email == "") {
			$("#email_area").html("请输入邮箱!").css("color", "red");
			return false;
		}else if(email.match(pattern3)==null){
			$("#email_area").html("邮箱格式不正确!").css("color", "red");
			return false;
		}else{
			$("#email_area").html("正确！").css("color", "green");
		}

		// 手机号码是否输入正确
		var pattern4 = /^[0-9]+$/g;
		if (telephone == null || telephone == ""||telephone.match(pattern4)==null||telephone.length!==11) {
			$("#telephone_area").html("请输入11位电话!").css("color", "red");
			return false;
		}else{
			$("#telephone_area").html("正确！").css("color", "green");
		}
		
		//ajax与后台交互
		url = '/loganalyze/index.php/Home/User/add_user';
		htmlobj = $.ajax({
			type : "POST",
			url : url,
			data : $('#add_user').serialize(), // 把表单序列化
			async : false
		});
		
		if(htmlobj.responseText==2){
			$("#name_area").html("账户已经存在！").css("color", "red");
			return false;
		}else{
			//页面要刷新
			$("#notice_area").html("添加成功！");
		}
	});

php  Thinkphp代码

public function add_user() {
		$userDB = M ( 'log_user' );
		$name = $_POST ["name"];
		// 判断该账户名是否已经存在
		$name_num = $userDB->where ( array ("name" => $name ) )->count ( "name" );
		$userDB->create ();
		
		if ($name_num === "0") {
			if ($userDB->add ()) {
				echo 1;
			} else {
				echo 0;
			}
		} else {
			echo 2;
		}
	}