jquery.form5.js 插件使用教程

使用方法

引入js

 <script type="text/javascript" src="//h5.org.cn/js/jquery.js"></script>
  <!-- 下面是表单验证插件 -->
  <script type="text/javascript" src="//h5.org.cn/js/jquery.form5.js"></script>

绑定表单

 <form action="" method="post" onsubmit="return postform();">
	                <ul>
	                    <li>
	                        <input type="text" name="name" id="" class="inp-order inp1" placeholder="您的姓名">
	                    </li>
	                    <li>
	                        <input type="text" name="myid" id="" class="inp-order inp1" placeholder="您的身份证号码18位">
	                    </li>
	                    <li>
	                        <input type="text" name="mobile" id="" class="inp-order inp1" placeholder="您的手机">
	                    </li>
	                    <li>
	                        <input type="password" name="pass1" id="" class="inp-order inp1" placeholder="设置一个密码">
	                    </li>
	                    <li>
	                        <input type="password" name="pass2" id="" class="inp-order inp1" placeholder="重复输入一下密码">
	                    </li>
	                    <li>
	                        <input type="text" name="tel" id="" class="inp-order inp1" placeholder="办公电话">
	                    </li>
	                    <li>
	                        <input type="text" name="email" id="" class="inp-order inp1" placeholder="您的邮箱">
	                    </li>
	                    <li>
	                        <input type="text" name="addr" id="" class="inp-order inp2" readonly="readonly" placeholder="办公地点">
	                    </li>
	                    <li>
	                      <label role="checkbox">
                        <input type="checkbox" name="privilege_id" id=""> 已阅读并同意<a href="javascript:;">《用户协议》</a><a href="javascript:;">《隐私政策》</a>
                    </label>
	                    </li>
	                    <li>
	                        <input type="submit" value="预约参观" class="btn-order2">
	                        <p class="tips">
	                            <img src="images/ico-attention.png" alt="">
	                            您的信息将仅用于参观预约使用
	                        </p>
	                    </li>
	                </ul>
	            </form>

验证代码

 <script>
    
 
    // 表单验证使用 ========================================================
    // 注意name选择器选择对应的Input
    
    function postform(){
	
    // 姓名
    inp = $("[name='name']");
	value=inp.val();
	if(!form5_null(value)||!form5_max(value, 10)){
		_alert('姓名不能为空，并且不能大于10个字符');  // 提示文字
      	inp.focus(); // 焦点到文本框
        return false;
	}
      
	//if(form5_ajax("/index.php?c=member&a=rules","user="+value)=='false'){
	//	alert('用户名已被注册，请更换用户名');return false;
	//}
   

    inp = $("[name='myid']");
	value=inp.val();
	if(!form5_myId(value)){
		_alert('请输入正确的18位身份证号码');
        inp.focus();
        return false;
	}
      
    inp = $("[name='mobile']");
	value=inp.val();
	if(!form5_mobile(value)){
		_alert('请输入正确的手机号');
        inp.focus();
        return false;
	}
      
	inp = $("[name='pass1']");
    value=inp.val(); 
	if(!form5_null(value) || value.length < 6){
		_alert('请输入密码并且长度大于等于6位');
        inp.focus();
        return false;
	}
      
	inp=$("[name='pass1']");
	inp2=$("[name='pass2']");
    value1=inp.val();
    value2=inp2.val();
	if(value1!=value2){
		_alert('两次密码输入不同，请修改');
        inp2.focus();
        return false;
	}
      
    inp=$("[name='tel']");
    value=inp.val(); 
	if(!form5_mobile(value)){
		_alert('请输入正确的办公电话');
        inp.focus();
        return false;
	}
      
	inp=$("[name='email']");
    value=inp.val(); 
	if(!form5_email(value)){
		_alert('请输入正确的email地址');
        inp.focus();
        return false;
	}
      
    inp = $("[name='privilege_id']");
    if(!inp.is(':checked')){
        _alert('请阅读并同意用户协议');
        inp.focus();
        return false;
    }

	return true;
}
    
  </script>

参数说明

form5_null(value)

form5_min(value, param)

form5_max(value, param)

form5_string(value)

form5_mobile(value)

form5_phone(value)

form5_myId(value)

form5_zipCode(value)

form5_email(value)

form5_begin(value, param)

form5_decimal(value)

form5_ismoney(value)

form5_ajax(url,value,backcall)

_alert(str)