前端模板：
第一步：引入所需文件：
<script type="text/javascript" src="/PHPxueba15/App/Modules/Admin/Tpl/Public/Js/jquery-1.8.2.min.js"></script>
<link href="/PHPxueba15/App/Modules/Admin/Tpl/Public/hdjs/css/hdjs.css" rel="stylesheet" />
<script src="/PHPxueba15/App/Modules/Admin/Tpl/Public/hdjs/js/hdjs.js"></script>
<script src="/PHPxueba15/App/Modules/Admin/Tpl/Public/Js/category.js"></script>
第二步：form表单
<form action="{:U(GROUP_NAME.'/Category/addCate')}" method="post">
<table id="table" class='table table-striped table-bordered'>
<thead>
<tr>
<th width="20%">名称</th>
<th>值</th>
</tr>
</thead>
<tbody>
<tr>
<td>分类名称</td>
<td>
<input type="text" name="cname" />
</td>
</tr>
<tr>
<td>分类排序</td>
<td>
<input name="sort" type="text" />
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交保存"/></td>
</tr>
</tbody>
</table>
</form>
第三步：自定义js文件category.js
$(function(){
$("form").validate({
cname: {
rule: {
required:true,
maxlen:10
},
error: {
required: "不能为空 ",
maxlen: "不能大于10个字符 "
},
message: "分类名称长度 1到 10 位 ",
success: "分类名称正确"
},
sort: {
rule: {
required: true,
num:"1,100"
},
error: {
required: "不能为空 ",
num: "排序不能大于100 "
},
message: "填写排序1~100之间的数字 ",
success: "排序填写正确"
}
})
})
应用实例：用户/管理员登录验证
前端模板：
第一步：引入所需文件：
<script type="text/javascript" src="/PHPxueba15/App/Modules/Admin/Tpl/Public/Js/jquery-1.8.2.min.js"></script>
<link href="/PHPxueba15/App/Modules/Admin/Tpl/Public/hdjs/css/hdjs.css" rel="stylesheet" />
<script src="/PHPxueba15/App/Modules/Admin/Tpl/Public/hdjs/js/hdjs.js"></script>
<script src="/PHPxueba15/App/Modules/Admin/Tpl/Public/Js/login.js"></script>
第二步：form表单
<form action="{:U(GROUP_NAME.'/Login/login')}" method="post">
<table>
<tbody>
<tr>
<td width="18%">账号:</td>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="password" />
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交保存" /></td>
</tr>
</tbody>
</table>
</form>
第三步：自定义js文件login.js
$(function(){
$("input[name='username']").focus();
$("form").validate({
username: {
rule: {
required: true,
ajax: "checkAname"
},
error: {
required: "不能为空 ",
ajax: "用户名不存在"
},
message: "请输入帐号 ",
success: "正确"
},
password: {
rule: {
required: true,
ajax: {
url: "checkApwd", // 请求的Url
field:["username","password"] ,
},
regexp:/^S{6,32}$/,
minlen:6,
maxlen:32
},
error: {
required: "不能为空 ",
ajax: "密码错误",
regexp: "密码格式错误 ",
minlen: "不能小于6个字符 ",
maxlen: "不能大于32个字符 "
},
message: "请输入密码",
success: "正确"
}
})
})
控制器：
第四步：服务器端实现异步验证
/**
* 异步验证管理员帐号
*/
Public function checkAname () {
if (!$this->isAjax()) halt('页面不存在');
$aname = $this->_post('username');
$where = array('aname' => $aname);
if (M('admin')->where($where)->find()) {
echo 1;
} else {
echo 0;
}
}
/**
* 异步验证密码
*/
Public function checkApwd () {
if (!$this->isAjax()) halt('页面不存在');
$aname = $this->_post('username');
$apwd = $this->_post('password', 'md5');
$where = array('aname' => $aname);
$password = M('admin')->where($where)->getField('apwd');
if ($password && $password == $apwd) {
echo 1;
} else {
echo 0;
}
}
第五步：使用注解
1、jquery-1.8.2.min.js(版本和名称一定要是这个文件，才能正常实现“JS”的验证)
2、现在的版本是：validate;(以前的版本是：validation)
3、一一对应关系：rule<--->error
4、required:true,一定要是“第一个验证规则”,否则会不显示"不能为空"！
5、field:["username","password"] ,//将字段username、password的值作为post参数传递
6、echo 1;——验证通过；echo 0;——验证失败；