python测试开发django-154.bootstrap-formvalidation
2021/10/13 14:15:10
本文主要是介绍python测试开发django-154.bootstrap-formvalidation,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
表单输入框对输入内容校验,这是一个很基本的功能,像这种非常普遍的功能,当然是先找下有没有现成的插件可以使用。
这里介绍一款很好用的表单验证插件,formvalidation,实际上也是bootstrap的一个插件,之前叫bootstrapValidator,现在独立出来了。
官网:http://formvalidation.io/
formvalidation下载与使用
formvalidation官网最新版是需要收费的,当然我知道小伙伴们跟我一样是不愿意去花这个钱的,所以我这里找了一个早期的免费版可以用。
下载地址http://down.htmleaf.com/1505/201505101833.zip
下载后解压,主要会用到vendor和dist里面的文件,里面也有一些案例可以学习
在本地引用的时候需要引用一个formValidation.min.css资源和5个js资源
<head> <link href="/static/bootstarp/css/bootstrap.min.css" rel="stylesheet"> <link href="/static/bootstrap-formvalidation/dist/css/formValidation.min.css" rel="stylesheet"> <script src="/static/bootstarp/jquery/jquery3.2.1.js"></script> <script src="/static/bootstarp/js/bootstrap.min.js"></script> <!-- 引入5个相关 js --> <script type="text/javascript" src="/static/bootstrap-formvalidation/vendor/jquery/jquery.min.js"></script> <script type="text/javascript" src="/static/bootstrap-formvalidation/vendor/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="/static/bootstrap-formvalidation/dist/js/formValidation.js"></script> <script type="text/javascript" src="/static/bootstrap-formvalidation/dist/js/framework/bootstrap.js"></script> <script type="text/javascript" src="/static/bootstrap-formvalidation/dist/js/language/zh_CN.js"></script> </head>
需要注意的是,虽然前面已经在项目中导入了bootstrap.js,还是需要再导入formvalidation的bootstrap.js文件,因为它和你之前导入的并不相同。
还有前面导入了jquery.min.js,还是要导入formvalidation里面的jquery.min.js,因为如果不导入,可能会导致remote类型的验证失效。
使用示例
写一个登录表单,校验用户名,密码和邮箱格式
<!DOCTYPE html> <html lang="zh-CN"> <head> <link href="/static/bootstarp/css/bootstrap.min.css" rel="stylesheet"> <link href="/static/bootstrap-formvalidation/dist/css/formValidation.min.css" rel="stylesheet"> <script src="/static/bootstarp/jquery/jquery3.2.1.js"></script> <script src="/static/bootstarp/js/bootstrap.min.js"></script> <!-- 引入5个相关 js --> <script type="text/javascript" src="/static/bootstrap-formvalidation/vendor/jquery/jquery.min.js"></script> <script type="text/javascript" src="/static/bootstrap-formvalidation/vendor/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="/static/bootstrap-formvalidation/dist/js/formValidation.js"></script> <script type="text/javascript" src="/static/bootstrap-formvalidation/dist/js/framework/bootstrap.js"></script> <script type="text/javascript" src="/static/bootstrap-formvalidation/dist/js/language/zh_CN.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6"> <form id="login-form" action="" method="post"> <div class="form-group form-group-lg"> <label for="user">用户名</label> <input type="text" class="form-control" id="user" name="user" placeholder="输入用户名"> </div> <div class="form-group form-group-lg"> <label for="password">密码</label> <input type="password" class="form-control" id="password" name="password" placeholder="输入密码"> </div> <div class="form-group form-group-lg"> <label for="email">邮箱</label> <input type="email" class="form-control" id="email" name="email" placeholder="输入邮箱"> </div> <div class="form-group form-group-lg "> <input type="submit" class="btn btn-info form-control" value="提交"> </div> </form> </div> </div> </div> </body> </html>
校验器
<script> // 校验器 $(function() { $('#login-form').formValidation({ message : 'This value is not valid', icon : { valid : 'glyphicon glyphicon-ok', invalid : 'glyphicon glyphicon-remove', validating : 'glyphicon glyphicon-refresh' }, fields : { user: { message : '用户名校验不通过', validators : { notEmpty : { message : '不能为空' }, stringLength: { min: 3, max: 10, message: '用户名3-10位字符' }, regexp: { regexp: /^[a-zA-Z0-9_\.]+$/, message: '用户名不能有特殊字符' } /* * stringLength: { min: 6, max: 30, message: 'The username must * be more than 6 and less than 30 characters long' }, */ /* * remote: { url: 'remote.php', message: 'The username is not * available' }, */ /* * regexp: { regexp: /^[a-zA-Z0-9_\.]+$/, message: 'The username * can only consist of alphabetical, number, dot and underscore' } */ } }, password : { validators : { notEmpty : { message : '不能为空' }, stringLength: { min: 6, max: 16, message: '用户名6-16位字符' }, regexp: { regexp: /^[a-zA-Z0-9_\.]+$/, message: '用户名不能有特殊字符' } } }, email : { validators : { notEmpty : { message : '不能为空' }, emailAddress: { message: '邮箱格式不合法' } } } } }) }); </script>
显示效果
常用的校验方式validators
校验不为空
notEmpty: { message: 'The username is required and can\'t be empty' }
校验字符串长度
stringLength: { min: 6, max: 30, message: 'The username must be more than 6 and less than 30 characters long' }
正则校验
regexp: { regexp: /^[a-zA-Z0-9_\.]+$/, message: 'The username can only consist of alphabetical, number, dot and underscore' }
校验邮箱格式
emailAddress: { message: 'The input is not a valid email address' }
校验手机号
phone:{ message: '不是合法电话', country:'CN' }
校验网页url地址
uri: { message: 'The input is not a valid URL' }
校验整数,也是通过正则校验
regexp: { regexp: /^([0-9][0-9]*)$/, message: '必须为整数' }
数字校验
age: { validators: { notEmpty: {}, digits: {}, greaterThan: { value: 18 }, lessThan: { value: 100 } } },
校验日期
date: { format: 'YYYY-MM-DD hh:mm:ss', message : '不是合法的日期' }
密码二次确认校验
修改密码的时候,一般会二次确认校验密码
<div class="form-group form-group-lg"> <label for="password">新密码</label> <input type="password" class="form-control" id="password" name="password" placeholder="输入密码"> </div> <div class="form-group form-group-lg"> <label for="password2">重复密码</label> <input type="password" class="form-control" id="password2" name="password2" placeholder="输入密码"> </div>
校验两次密码一样,使用identical关联field字段
password : { validators : { notEmpty : { message : '不能为空' }, stringLength: { min: 6, max: 16, message: '用户名6-16位字符' }, regexp: { regexp: /^[a-zA-Z0-9_\.]+$/, message: '用户名不能有特殊字符' } } }, password2 : { validators : { notEmpty : { message : '不能为空' }, identical:{ field: 'password', message : '两次密码输入不一致' } } },
显示效果
remote远程校验
在注册的时候,需要校验用户名是否合法,这时候会用到 remote 校验
fields : { user: { message : '用户名校验不通过', validators : { notEmpty : { message : '不能为空' }, stringLength: { min: 3, max: 10, message: '用户名3-10位字符' }, regexp: { regexp: /^[a-zA-Z0-9_\.]+$/, message: '用户名不能有特殊字符' }, remote: { type: 'get', url: '/validate/user', message: '账号已被使用', delay: 1000 //延迟一秒 } } } }
输入账号后,延迟一秒会发请求校验,请求参数会在问号后面带上
GET http://localhost:8000/validate/user?user=admin
后端写个接口查询数据库,返回json格式:{"valid": False}
或{"valid": True}
def validate_user(request): user = request.GET.get("user") # 判断是否存在 if user == "yoyo": return JsonResponse({"valid": False}) else: return JsonResponse({"valid": True})
校验不通过显示效果
校验通过
这篇关于python测试开发django-154.bootstrap-formvalidation的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-14获取参数学习:Python编程入门教程
- 2024-11-14Python编程基础入门
- 2024-11-14Python编程入门指南
- 2024-11-13Python基础教程
- 2024-11-12Python编程基础指南
- 2024-11-12Python基础编程教程
- 2024-11-08Python编程基础与实践示例
- 2024-11-07Python编程基础指南
- 2024-11-06Python编程基础入门指南
- 2024-11-06怎么使用python 计算两个GPS的距离功能-icode9专业技术文章分享