requirejs的使用
jquery.validate.js的使用

1. userAdd.html页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/><script src="../requirejs/require.js" data-main="main" type="text/javascript"></script><style type="text/css">.error {font-size: 13px;color: red;}</style>
</head>
<body>
<div class="container" style="padding-top: 15px"><div class="panel panel-primary" style="width: 400px"><div class="panel-heading"><div class="panel-title"><h2>Add User</h2></div></div><div class="panel-body"><form role="form" class="form" id="userAddForm" onsubmit="return false"><div class="form-group"><label class="">Name</label><input class="form-control" type="text" id="userName" name="userName" /></div><div class="form-group"><label class="">Email</label><input class="form-control" type="email" id="email" name="email" /></div><div class="form-group"><label>Address</label><!--在这里, 我们可以直接把验证写在html中,就像下面这一行; 也可以在validate脚本中编写--><input class="form-control" type="text" id="address" name="address" required minlength="5" maxlength="50" /></div></form></div><div class="panel-footer"><button type="button" id="btnSubmit">Submit</button></div></div>
</div>
</body>
</html>

2. main.js

require.config({//baseUrl:'.',paths: {'myjquery': 'jquery-1.9.1.min','myvalidate': 'jquery.validate','mymessagescn': 'messages_cn','mybootstrap':'../js/bootstrap.min'},//不是标准的AMD文件, 用shimshim: {//这个key要跟上面paths中定义的key一直'myvalidate': {//依赖项deps: ['myjquery'],exports: 'a'},'mymessagescn': {//注意这个位置,messages_cn这个插件是依赖两个的, 我之前只写了jquery, 页面报错;//所以依赖关系一样要搞清楚deps: ['myjquery','myvalidate'],exports: 'b'}}
});require(['user'], function (user) {$('#btnSubmit').click(user.formSubmit);
});

2. user.js

define(['myjquery', 'myvalidate','mymessagescn'],function () {$("#userAddForm").validate({rules: {userName: {required: true,minlength: 3,maxlength: 20},email: {required: true,maxlength: 20}},submitHandler: function () {$.ajax({url: "",dataType: "json",async: true,type: "post",beforeSend: function () {alert("beforeSend");return false;},success: function (data, status) {alert("success")},error: function () {alert("error")}});}});var getForm = function () {return $("#userAddForm");}var submit = function () {getForm().submit();}return {formSubmit: submit};
});

3. 目录结构

jquery
jquery-1.9.1.min.js
jquery.validate.js
messages_cn.js
main.js
user.js
userAdd.html

requirejs+jquery表单验证相关推荐

一款比较实用齐全的jQuery 表单验证插件
一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网 ...
轻量级的jQuery表单验证插件 - HAPPY.js
为什么80%的码农都做不了架构师?>>> 日期:2012-9-14 来源:GBin1.com 在线演示本地下载功能强大的表单验证插件很多,以前我们介绍过validati ...
JQuery 表单验证--jquery validation
jquery validation,表单验证控件官方地址 :http://jqueryvalidation.org/ jquery表单验证默认值校验规则 jquery表单验证默认的提示 1 &l ...
jQuery 表单验证插件，jQuery Validation Engine用法详解
jQuery 表单验证插件,jQuery Validation Engine用法详解功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...
php表单确认密码,jQuery表单验证之密码确认实例详解
本文主要为大家详细介绍了jQuery表单验证之密码确认的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 众所周知,在修改密码时会需要两次输入密码.这时如何确保两个密码框 ...
jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
jQuery 表单验证设置html(,jquery表单验证
如何用jquery进行表单验证 (1)所需工具: jQuery.1.8.3.js和jquery.validate.js,百度jquery validate插件即可找到下载 (2)引入js (3)按照插 ...
12个方便易用的jquery表单验证插件
绝大部分网站都是开放注册的,而注册就需要使用表单验证,因为网站都需要对注册用户的信息安全性和合理性做出判断,表单的注册都应该具备完善的验证方式,比如注册使用的手机号是否是真实的?用户填写的验证码是否正 ...
jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证
jQuery表单验证实例 / 包含用户名.密码.住址.邮箱验证如下图别忘了引入jQuery框架!!! 话不多说直接先上jQuery部分代码: <script type="text/ ...

requirejs+jquery表单验证

1. userAdd.html页面

2. main.js

2. user.js

3. 目录结构

requirejs+jquery表单验证相关推荐

最新文章

热门文章