Any page that involves user editing information and saving involves checking whether the data meets the requirements, and requires verification from the client and server side;
The verification on the customer service side is mainly to improve the user experience, while the verification on the server side is to ensure the compliance of data.
This plug-in also supports form verification for you. Add a required:true to the configuration of the columns that need to be verified. When regenerating the label in front of the form element, a * will be automatically generated in front of the label, which is used to prompt that the data is re-columnized will be verified.
Verification is used. For specific usage, please refer to the api of jquery validation.
The code is as follows (page address: https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form5-Validation.html):
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Form Verification</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../css/bootstrap.css"><!--Custom site style--><link rel="stylesheet" href="../css/site.css"><script src="../lib/jquery.js"></script><script src="../lib/jquery.validate.js"></script><script src="../lib/bootstrap.js"></script><!--Tool Methods--><script src="../scripts/global.js"></script><!--Plugin--><script src="../scripts/plugin.js"></script></head><body><div><div><label>Smart Form with Verification</label><div><button id="btnSubmit">Submit Form</button></div><div><form action="#" id="formContainer"></form></div><div><div><label>Introduction</label></div><div><label>Verification of forms</h3><blockquote><p>Use jquery validation for validation. For other verification methods, please refer to jquery validation. Custom verification global.Fn.setDefaultValidator() method In the global.js file, the file is changed to a tool file, which defines many tool methods, including form serialization, date formatting, array judgment, setting default verification, display message, pop-up window, initialization plug-in, initialization form, file download, form saving, etc.</p></blockquote></div><script>$(function () {var eles=[[{label:{text:'custom username:'},ele:{type:'text',name:'UserName',title:'Username:',required:true}},{ele:{type:'radio',name:'sex',title:'gender:',items:[{text:'male',value:1},{text:'female',value:2}]}},{ele:{type:'checkbox', name:'plant',title:'using platform:',items:[{text:'APP',value:'app'},{text:'web',value:'web'}]}} ],[{ele:{type:'select',name:'province',title:'Province:',withNull:true,items:[{text:'Guangdong',value:'GD'},{text:'Hunan',value:'HN'}]}},{ele:{pre:{text:'<input type="radio">'},type:'text',name:'displayName',title:'display name:'}},{ele:{type:'search',title:'Product',id:'ProductName',required:true}}],[{ele:{type:'datetime',name:'FromeDate',title:'Validation period:'}},{ele:{type:'datetime',name:'ToDate',title:'~'}},]];//Hidden form elements are mainly used for editing. The background can be distinguished. var hides = [{ id: 'primaryKey' }];var bsForm = new BSForm({ eles: eles, hides: hides, autoLayout: '1,3' }).Render('formContainer',function(bf){var model={primaryKey:1,UserName:'xxg',sex:1,plant:['app','web'],province:'GD',displayName:'TEST',ProductName:'Notebook',FromeDate:'2015-06-10',ToDate:'2015-08-08'};bf.InitFormData(model);});$("#btnSubmit").bind('click',function () {if (!$("#formContainer").valid()) {alert("Verification failed!");}else{var postData=bsForm.GetFormData();alert("The obtained expression data is:"+JSON.stringify(postData)); }});//Use custom configured verification style to handle global.Fn.setDefaultValidator();//Define verification rules $("#formContainer").validate({rules:{UserName:{required:true,minlength:3,maxlength:10},ProductName:{required:true}}});});</script></body></html>The UserName column is configured with required fill-in and length verification. The running interface deletes the UserName value. You can see the effect when submitting the form:
The renderings are as follows: