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

编程问答

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><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表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： amoeba mysql_Amoeba介
下一篇：释放pytorch占用的gpu显存_再次