基于前端验证框架bootstrapValidator的表单验证
程序员文章站
2022-05-10 18:59:26
...
前两天学习到了前端验证框架bootstrapValidator，因此用它写了个简单的表单验证，没有涉及后台。其中表单用到了bootstrap框架，验证部分用到了bootstrapValidator框架。
效果图如下：
什么都不填写，直接提交后如下，然后按钮不可点击：
错误填写效果：按钮不可点击
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--引入boostrap样式文件-->
<link rel="stylesheet" type="text/css" href="asserts/bootstrap/css/bootstrap.min.css"/>
<!--引入boostrap validator样式文件-->
<link rel="stylesheet" href="asserts/bootstrapvalidator/css/bootstrapValidator.min.css" />
</head>
<body>
<div class="container">
<form action="" class="form-horizontal myform">
<div class="form-group">
<label for="" class="control-label col-sm-2">用户名</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label for="" class="control-label col-sm-2">手机号</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="telphone" />
</div>
</div>
<div class="form-group">
<label for="" class="control-label col-sm-2">邮箱地址</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="email" />
</div>
</div>
<!--提交按钮-->
<div class="form-group">
<div class="col-sm-2 col-sm-offset-6">
<button class="btn btn-success btn-block" type="submit">提交</button>
</div>
</div>
</form>
</div>
<!--导入jquery库-->
<script src="js/jquery-3.3.1.min.js"></script>
<!--导入boostrap js库-->
<script src="asserts/bootstrap/js/bootstrap.min.js"></script>
<!--导入boostrap validator js库-->
<script src="asserts/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
<!--导入语言包-->
<script src="asserts/bootstrapvalidator/js/language/zh_CN.js"></script>
<script>
$(function(){
//为指定的表单控件绑定验证函数
$('.myform').bootstrapValidator({
//默认的错误提示信息
message:'这不是一个有效值',
//反馈图标样式(glyphicon)
feedbackIcons:{
valid:'glyphicon glyphicon-ok',
invalid:'glyphicon glyphicon-remove',
validating:'glyphicon glyphicon-refresh'
},
//设置需要校验的字段
fields:{
username:{
// message:'用户名输入有误',
//设置验证器
validators:{
//不为空验证
notEmpty:{
// message:'用户名不允许为空'
},
//长度验证
stringLength:{
min:6,
max:16,
// message:'用户名必须在6~16之间'
},
regexp:{
regexp:/^\w*$/,
message:'用户名必须由英文字母，数字或者下划线组成'
}
}
},
telphone:{
message:'无效的手机号',
validators:{
notEmpty:{
message:'手机号必须填写'
},
//手机号校验器
//此校验器多数地区不支持，建议使用正则表达式
// phone:{
// country:'CN',
// message:'手机号格式不正确'
// }
regexp:{
regexp:/^1[3578]\d{9}$/,
message:'手机号格式不正确'
}
}
},
email:{
message:'错误的邮箱地址',
validators:{
notEmpty:{
message:'邮箱地址不为空'
},
emailAddress:{
message:'邮箱地址格式不正确'
}
}
}
}
});
})
</script>
</body>
</html>
推荐阅读