jQuery Mobile是一個開源的,跨平臺的,專門為移動設備設計的JavaScript庫。其中的Form插件可以方便地驗證表單,保證用戶輸入符合要求。
驗證表單包括驗證文本框、郵箱、密碼等輸入框的輸入內容是否符合要求。以下是一個簡單的代碼示例:
$(document).on("pagecreate","#register",function(){ $("#register-form").validate({ submitHandler: function() { alert("注冊成功"); }, rules: { username: { required: true, minlength: 3 }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true } }, messages: { username: { required: "用戶名不能為空", minlength: "用戶名至少為三個字符" }, password: { required: "密碼不能為空", minlength: "密碼至少為五個字符" }, confirm_password: { required: "請再次輸入密碼", minlength: "密碼至少為五個字符", equalTo: "兩次輸入密碼不一致" }, email: { required: "郵箱不能為空", email: "請輸入有效的郵箱" } }, errorPlacement: function(error, element) { error.insertBefore(element); }, highlight: function(element, errorClass, validClass) { $(element).addClass(errorClass).removeClass(validClass); $(element).parent().addClass(errorClass); }, unhighlight: function(element, errorClass, validClass) { $(element).removeClass(errorClass).addClass(validClass); $(element).parent().removeClass(errorClass); } }); });
這段代碼中,我們通過validate方法調用了jQuery的驗證插件,定義了驗證規則和提示信息。submitHandler函數表示驗證通過后的操作,這里我們只是彈出一個提示框,實際應用中可以提交表單或者進行其他操作。
以上就是使用jQuery Mobile驗證表單的方法,希望對你有所幫助。
上一篇漂亮css下拉菜單樣式