您的位置：首页 > Web前端 > JQuery

RequireJS结合jQuery validation实现基础表单验证

2016-03-21 16:13 543 查看

1.这个是项目结构，前提所需要载入的文件是（标注的三个文件）：jquery.js jquery.validate.js require.js 可以在官网上下载

2.简单的静态页面：login.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/require.js" data-main="js/config"> </script>
</head>
<body>
<form id="demoForm">
<fieldset>
<legend>用户登录</legend>
<p>
<label for="username">用户名</label>
<input type="text" id="username" name="username"/>
</p>
<p>
<label for="password">密 码</label>
<input type="password" id="password" name="password"/>
</p>
<p>
<label for="password">确认密码</label>
<input type="password" id="confirm_password" name="confirm_password"/>
</p>
<p>
<label for="email">邮 箱</label>
<input type="email" id="email" name="email"/>
</p>
<p>
<label for="url">网 址</label>
<input type="url" id="url" name="url"/>
</p>
<p>
<input type="submit" value="登录"/>
</p>
</fieldset>
</form>
</body>
</html>

3. 使用define定义的表单验证规则模块：rules.js

/**
* Created by qsong on 2016/3/21.
*/
define(["jquery","j_validate"],function($,jv){
$(document).ready(function(){
$("#demoForm").validate({
rules:{
username:{
required:true,
minlength:2,
maxlength:10
},
password:{
required:true,
minlength:2,
maxlength:16
},
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
},
url:{
required:true,
url:true
}
},
messages:{
username:{
required:"必须填写用户名",
minlength:"用户名最小长度为2位",
maxlength:"用户名最大长度为10位"
},
password:{
required:"必须填写密码",
minlength:"密码最小长度为2位",
maxlength:"密码最大长度为16位"
},
confirm_password:{
required:"必须再次填写密码",
equalTo:"输入的密码不一致"
},
email:{
required:"必须填写邮箱",
email:"请输入正确的邮箱地址"
},
url:{
required:"必须填写网址",
url:"请输入正确的网址格式"
}
}
});
});
});

4. require.config引入所需要的js文件，加载模块，config.js，将最顶部的三个js文件加载进来

require.config({
baseUrl:"js",
paths:{
jquery:"jquery",
j_validate:"jquery.validate",
rules:"rules"
}
});

require(["jquery","j_validate","rules"]);

运行login.html

requireJS的知识点详见前几篇文章。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航