欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

requirejs+jquery表单验证

发布时间：2023/12/18 编程问答 47 豆豆
生活随笔 收集整理的这篇文章主要介绍了 requirejs+jquery表单验证 小编觉得挺不错的,现在分享给大家,帮大家做个参考.
  • 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表单验证的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。