Bootstrap 양식 유효성 검사 formValidation의 자세한 예
- PHPz원래의
- 2018-05-14 16:39:387692검색
이 글에서는 양식 동적 유효성 검사 기능을 구현하기 위한 Bootstrap 양식 유효성 검사 formValidation을 주로 소개합니다. 필요한 친구는 Bootstrap 튜토리얼
동적 추가를 참조할 수 있습니다. 입력하고 동적으로 새로운 검증 방법을 추가하세요!
초기 상태:
"+" 클릭 후:
확인 후:
지식 포인트:
1 먼저 공식 웹사이트로 이동하여 다운로드하세요: formvalidation.io/
2. 파일을 가져올 때 주의사항에 대해서는 이미 원격검증 글에서 언급했으므로 따로 다루지 않겠습니다.
사용된 키워드 3개: addField, RemoveField, Different
4 공식 웹사이트의 예제 이름은 서로 다릅니다. 나는 여기서 조금 게으른 편이다. 그리고 프로젝트 ajax를 제출할 때 form을 이용하여 제출하는 것이 아니라, 자체적으로 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();
})내 프로젝트에 양식 제출이 여러 개 있지만 비즈니스가 유사하기 때문에 다음 기능을 사용합니다.
예: var form=(“#”+panelId+”form”) panelId를 사용하여 구별합니다. 여러 형태.
x와 y의 이름은 동일합니다. 하지만 주의하면 GarageNo의 이름이 다른 것을 알 수 있습니다. 🎜>왜? of GarageNo는 같은 형식일 수 없습니다. 예를 들어 귀하와 귀하의 동료는 모두 여성이거나 18세일 수 있습니다.
removeField 및 addField 키워드가 매우 잘 사용되었습니다. >
garageNo의 값은 동일할 수 없습니다. 아래를 참조하세요.
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();
}이 diffArr.toString( )? 이것은 내가 통과한 GarageNo 이름의
문자열입니다. 예: 항목이 3개이고 idx=1이 1에 중점을 둡니다. 그런 다음 diffArr=["garageNo0","garageNo2",]버그 참고: 너무 많은 입력을 사용하면 때때로 입력이 자동으로 확인되지 않는 경우가 있습니다. 예를 들어 날짜 플러그인을 사용할 때입니다. 날짜를 클릭하면 입력이 확인되지 않습니다. 이때 위 코드를 수동으로 확인해야 합니다. 그런 다음 전체 양식을 확인하려면
$form.formValidation('revalidateField', "field");제출에 대한 세부 정보도 있습니다.
제출 버튼을 설정하지 않은 경우 이 플러그인은 자동으로 제출합니다. 제출 서비스가 실패하면 자동으로 새로 고쳐지고 페이지가 404 페이지 또는 기타 오류 페이지가 됩니다. 🎜>하지만 가끔 새로 고치기를 원하지 않는 경우가 있습니다.
에 대한 튜토리얼이 많이 있습니다. 제출 버튼을 새로 고치지 않는 것에 대해 인터넷에서 확인하세요.
rree[관련 권장 사항]
1.
Javascript 무료 동영상 튜토리얼2. >Nodejs에서 흔히 사용되는 미들웨어 body-parser 상세 설명
3.JavaScript 양식 검증 구현 코드_javascript 기술
5. Vue v-model 양식 제어 바인딩 예제 튜토리얼
위 내용은 Bootstrap 양식 유효성 검사 formValidation의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!