ホームページ >ウェブフロントエンド >jsチュートリアル >Bootstrap フォーム検証の詳細な例
この記事では、フォームの動的検証機能を実現するための Bootstrap フォーム検証 formValidation を主に紹介します。必要な方は、Bootstrap チュートリアルを参照してください
入力を動的に追加し、新しい検証メソッドを動的に追加します。
初期ステータス:
「+」をクリック後:
検証後:
知識ポイント:
1 公式ウェブサイトにアクセスしてダウンロード: フォーム検証 .io /
2. ファイルをインポートします。注意事項については、リモート検証の記事で既に説明したので説明しません。
3 使用するキーワード: addField、removeField、differ
4 公式 Web サイトのサンプルの名前が異なることに注意してください。ここでは少し怠け者です。また、プロジェクトが ajax 化されている場合、フォームは送信に使用されず、それ自体が json として送信されるため、x と y の名前は同じになります。
良いスタート:
まず、html に addPos としてマークされた「+」が必要です。次に、「removPos」としてマークされた「-」があり、
<p id="posXY" class=" panel panel-default ">
<!-- 添加-->
<p class="panel-heading" >设置车库xy坐标</p>
<p class="addPos form-group">
<p class="col-lg-4 col-sm-4 col-xs-4" >
<input type="text" class="form-control text-left" name="garageNo" placeholder="停车库" style="min-width: 150px"/>
</p>
<p class="col-lg-3 col-sm-3 col-xs-3" >
<input type="text" class="form-control" name="posX" placeholder="X"/>
</p>
<p class="col-lg-3 col-sm-3 col-xs-3" >
<input type="text" class="form-control" name="posY" placeholder="Y"/>
</p>
<p class="col-lg-2 col-sm-2 col-xs-2" >
<button type="button" class="btn btn-default addButtonPos"><i class="glyphicon glyphicon-plus"></i></button>
</p>
</p>
<!-- 删除 -->
<p class="removPos form-group hide" id="posTemplate">
<p class="col-lg-4 col-sm-4 col-xs-4" >
<input type="text" class="form-control text-left" name="garageNo" placeholder="停车库" style="min-width: 150px"/>
</p>
<p class="col-lg-3 col-sm-3 col-xs-3" >
<input type="text" class="form-control" name="posX" placeholder="X"/>
</p>
<p class="col-lg-3 col-sm-3 col-xs-3" >
<input type="text" class="form-control" name="posY" placeholder="Y"/>
</p>
<p class="col-lg-2 col-sm-2 col-xs-2" >
<button type="button" class="btn btn-default removeButtonPos"><i class="glyphicon glyphicon-minus"></i></button>
</p>
</p>
</p>それから js が来ます:
/**
* pos添加
* @param $that
*/
function addButtonPosClick($that){
var panelId = $that.parents(".topTemplate").attr("id");
var $form=$('#'+panelId+"form")
// defaultPanel(panelId)
var bookIndex=typeObj[panelId]++;
console.log(panelId,bookIndex)
var $template = $('#'+panelId+' #posTemplate'),
$clone =$template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('step',bookIndex)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="garageNo"]').attr({"step":bookIndex,"name":"garageNo"+bookIndex})
.click(function(){
clickBindGarageNo(panelId,bookIndex)
}).end()
.find('[name="posX"]').attr("step",bookIndex).end()
.find('[name="posY"]').attr("step",bookIndex).end()
// Add new fields
// Note that we also pass the validator rules for new field as the third parameter
// $('#defaultForm')
// gFieldArr.push(panelId+'[' + bookIndex + '].garageNo')
$form
.formValidation('addField', "garageNo"+bookIndex, formObj.sameAs(false))
.formValidation('addField', 'posX', myPosXY)
.formValidation('addField', 'posY', myPosXY)
}
function myFormValidation($form){
// var $form=$("#"+$panelId+"form")
$form
.formValidation({
framework: 'bootstrap',
locale: 'zh_CN',
message: '值无效',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:
{
myimg:{
validators: {
notEmpty: {
message: '请选择一个文件上传'
},
file: {
extension: 'jpeg,jpg,png',
type: 'image/jpeg,image/png',
maxSize: 1*1024 * 1024,
message: '该文件必须为jpeg,jpg,png格式和必须不超过1MB的大小'
}
}
}
}
})
.on('click', '.addButtonPos', function() {
addButtonPosClick($(this))
})
//Remove button click handler
.on('click', '.removeButtonPos', function() {
var $that = $(this)
var panelId = $that.parents(".topTemplate").attr("id");
// defaultPanel(panelId)
var $row = $(this).parents('.form-group'),
index = $row.attr('step');
// var myname='[' +index + ']'
var bookIndex= typeObj[panelId]--;
// $('#defaultForm')
$form
.formValidation('removeField', $row.find('[name="garageNo'+bookIndex+'"]'))
.formValidation('removeField', $row.find('[name="posX"]'))
.formValidation('removeField', $row.find('[name="posY"]'))
// Remove element containing the fields
$row.remove();
})私のプロジェクトなのでhas 複数のフォームが送信されますが、ビジネスは似ているため、次のような関数が使用されます。
複数のフォームを区別するには、panelId を使用します。 var form=(“#”+panelId+”form”) 前述のように、x と y の名前は同じであることがわかります。は別の名前です。
たとえば、テーブルに座っている人の ID 番号を同じにすることはできません。
キーワードremoveFieldとaddFieldを同じにすることはできません。以下を参照してください:
var differentValid= function(diffstr){
var vv={
validators: {
different: {
field: diffstr,
message: '不能有相同的停车库'
}
}
}
return vv
}ユーザーがgarageNoの値を入力するとき:
clickBindGarageNo(panelId,idx){
$form.formValidation('addField', "garageNo"+idx, differentValid(diffArr.toString()))
var fv =$form.data('formValidation');
fv.validate();
}これは、
文字列です。すべてのエントリを調べたガレージの名前。例: 3 つのエントリがあり、idx= 1 に焦点が当てられます。次に、diffArr=["garageNo0","garageNo2",]注意してください。バグ: 入力を多用すると、日付プラグインを使用した後など、入力が自動的に検証されない場合があります。上記のコードは、最初に新しい検証方法を追加してから、フォーム全体を検証するものです。
送信に関する詳細は次のとおりです。フォームに送信ボタンを設定すると、このプラグインは自動的に送信しますが、自動的に更新され、ページが 404 ページまたはその他のエラー ページになる場合もあります。更新しないでください。
$form.formValidation('revalidateField', "field");【関連する推奨事項】1 です。
JavaScript の無料ビデオチュートリアル
2. Nodejs で一般的に使用されるミドルウェア本体パーサーの詳細な例3
以上がBootstrap フォーム検証の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。