python測試開發django-154.bootstrap-formvalidation
阿新 • • 發佈：2021-10-13
前言
表單輸入框對輸入內容校驗，這是一個很基本的功能，像這種非常普遍的功能，當然是先找下有沒有現成的外掛可以使用。
這裡介紹一款很好用的表單驗證外掛，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: '必須為整數'
}
校驗日期
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})
校驗不通過顯示效果
校驗通過