Bootstrap は、米国 Twitter Company のデザイナー、Mark Otto と Jacob Thornton によって開発された、HTML、CSS、および JavaScript をベースとしたシンプルで直感的かつ強力なフロントエンド開発フレームワークで、Web 開発を高速化します。この記事では主に、初心者や js に慣れていない人に最適な、シンプルで実用的な Bootstrap PHP フォーム検証の例について説明します。Ajax リモート検証もあります。興味のある友達は一緒に学ぶことができます。
js 検証フォーム
1 $(document).ready(function() { 2 $('#defaultForm') 3 .bootstrapValidator({ 4 message: 'This value is not valid', 5 feedbackIcons: { 6 valid: 'glyphicon glyphicon-ok', 7 invalid: 'glyphicon glyphicon-remove', 8 validating: 'glyphicon glyphicon-refresh' 9 }, 10 fields: { 11 username: { 12 message: 'The username is not valid', 13 validators: { 14 notEmpty: { 15 message: 'The username is required and can\'t be empty' 16 }, 17 stringLength: { 18 min: 6, 19 max: 30, 20 message: 'The username must be more than 6 and less than 30 characters long' 21 }, 22 /*remote: { 23 url: 'remote.php', 24 message: 'The username is not available' 25 },*/ 26 regexp: { 27 regexp: /^[a-zA-Z0-9_\.]+$/, 28 message: 'The username can only consist of alphabetical, number, dot and underscore' 29 } 30 } 31 }, 32 email: { 33 validators: { 34 notEmpty: { 35 message: 'The email address is required and can\'t be empty' 36 }, 37 emailAddress: { 38 message: 'The input is not a valid email address' 39 } 40 } 41 }, 42 password: { 43 validators: { 44 notEmpty: { 45 message: 'The password is required and can\'t be empty' 46 } 47 } 48 } 49 } 50 }) 51 .on('success.form.bv', function(e) { 52 // Prevent form submission 53 e.preventDefault(); 54 55 // Get the form instance 56 var $form = $(e.target); 57 58 // Get the BootstrapValidator instance 59 var bv = $form.data('bootstrapValidator'); 60 61 // Use Ajax to submit form data 62 $.post($form.attr('action'), $form.serialize(), function(result) { 63 console.log(result); 64 }, 'json'); 65 }); 66 });
おすすめコース:Bootstrap ビデオ チュートリアル
PHP リモート検証ユーザー名
1 $userName = $_POST['username']; 2 3 echo json_encode(array( 4 'message' => sprintf('Welcome %s', $userName), 5 ));
推奨コース: PHPビデオチュートリアル
以上がBootstrap + PHP フォーム検証の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。