日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

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

编程问答

requirejs+jquery表单验证

發布時間：2023/12/18 编程问答 34 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。