Validform

1.index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo - Validform - 一行代码搞定整站的表单验证！ &copy;瑞金佬的前端路</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>

<body> 
<form  id="form" action="index.php"> 
<span>
<label>用户名：</label><input type="text" datatype="mobile" errormsg="填写正确的手机号" sucmsg="手机号可注册" name="mobile" ><span class="validform_checktip"></span>
</span>
<br>
<!-- ignore="ignore" ajaxurl="index.php" 用于此input框的验证 -->
<span>
<label>密码：</label><input type="text" name="password" datatype="s6-12" errormsg="请输入6-12位密码" nullmsg="密码不能为空" name="password"><span class="validform_checktip"></span>
</span>
<br>
<span>
<label>确认密码：</label><input type="text"  recheck="password" datatype="s6-12" errormsg="输入密码不一致" nullmsg="密码不能为空"><span class="validform_checktip"></span>
</span>
<br>
<span><input type="submit" value="提交"> </span>
<!-- <span><input type="submit" value="重置" id="btn_reset"> </span>
 --></form>
</body>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/Validform_v5.3.2_min.js"></script>
<script type="text/javascript" src="../layer/layer.js"></script>
<script>
$(function(){
    $('#form').Validform({
        tiptype:4,
        //showAllError:true,
        //dragonfly:true,
        ajaxPost:true,//表单提交验证
        btnReset:"#btn_reset",
         datatype:{
             mobile:/^1[3|5|7|8]\d{9}$/,
             email:/^\w+@\w{2,3}.\w{2,6}$/,
             /*mobile:function(data){
                 // var reg=/^1[3|5|7|8]\d{9}$/;
                 // if(reg.test(data)){
                 //     return true;
                 // }else{
                 //     return false;
                 // }
             }*/
         },
         postonce:true,
         callback:function(data){
             if(data.status=='y'){
                 layer.msg(data.info,{icon:1});
                 //location.href='http://www.baidu.com';
             }else{
                 layer.msg(data.info,{icon:2});

             }
             
         }
})     
    
})
</script>
</html>

2.index.php

<?php
//echo $_POST['param'];
$str=['info'=>'注册成功', 'status'=>'y'];
//$str=['info'=>'手机号已注册', 'status'=>'n'];
echo json_encode($str);

 

posted on 2017-09-25 16:12  muak_muak  阅读(271)  评论(0)    收藏  举报

导航