使用validate.js实现表单数据验证
ASP.NET關(guān)于表單驗(yàn)證，目前知道的，除了以前那種傻瓜式的每個表單選項(xiàng)都用一個函數(shù)去驗(yàn)證之外，有兩種方法是比較方便的，今天先介紹一下第一種，在前端實(shí)現(xiàn)表單驗(yàn)證的方法——基于validate.js的表單驗(yàn)證方法。
注意喲，以下我都用截圖的方式掛出代碼，然后最后會把完整代碼貼出來，提供復(fù)制粘貼，小伙伴不要急著敲哦！
1.下載和引入validate.js
首先，我們需要下載一份validate.js文件，這個文件可以去JQuery官網(wǎng)或者csdn等網(wǎng)站下載。
?
下載好之后，新建一個html文件，然后先后將jquery.js文件和validate.js引入html代碼，我這里新建一個名為formCheck.html的文件，如下圖所示：
?
?這里為了待會的表單表現(xiàn)的好看一些，我引入了layui.css的樣式文件。
2.建立表單
??3.使用validate.js實(shí)現(xiàn)表單數(shù)據(jù)的驗(yàn)證
?同樣，我們直接看代碼截圖：
?
?除了這些檢驗(yàn)方式，validate.js里還封裝了包括郵箱格式驗(yàn)證，電話號碼格式驗(yàn)證等驗(yàn)證犯法，使用方法和上圖中的number一致，想進(jìn)一步了解的同學(xué)可以自行查看具體的js內(nèi)容哦。上圖中的代碼，rules部分限定了輸入數(shù)據(jù)的規(guī)范，message則設(shè)定了錯誤提示信息。
4.查看結(jié)果
?
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>前端表單驗(yàn)證</title>
? ? ? ? <link rel="stylesheet" type="text/css" href="layui-v2.3.0/layui/css/layui.css"/>
? ? ? ? <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
? ? ? ? <script type="text/javascript" src="js/jquery.validate.js"></script>
? ? ? ? <script type="text/javascript" src="layui-v2.3.0/layui/layui.js"></script>
? ? ? ? <style type="text/css">
? ? ? ? ? ? #form-box{
? ? ? ? ? ? ? ? width: 700px;
? ? ? ? ? ? ? ? height: 300px;
? ? ? ? ? ? ? ? margin: auto;
? ? ? ? ? ? ? ? position: relative;
? ? ? ? ? ? ? ? top: 100px;
? ? ? ? ? ? }
? ? ? ? </style>
? ? </head>
? ? <body>
? ? ? ? <form action="formCheck.html" method="post">
? ? ? ? ? ? <div id="form-box" class="layui-form layui-form-pane">
? ? ? ? ? ? ? ? <div class="layui-form-item">
? ? ? ? ? ? ? ? ? ? <label class="layui-form-label">用戶名</label>
? ? ? ? ? ? ? ? ? ? <div class="layui-input-inline">
? ? ? ? ? ? ? ? ? ? ? ?<input type="text" name="userName" class="layui-input">
? ? ? ? ? ? ? ? ? ? </div>? ? ? ?
? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ?<div class="layui-form-item">
? ? ? ? ? ? ? ? ? ? <label class="layui-form-label">密碼</label>
? ? ? ? ? ? ? ? ? ? <div class="layui-input-inline">
? ? ? ? ? ? ? ? ? ? ? ?<input type="text" name="passWord" class="layui-input">
? ? ? ? ? ? ? ? ? ? </div>? ?
? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? ?<div class="layui-form-item">? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?<input type="submit" name="" id="frmSubmit" value="提交" class="layui-btn layui-btn-primary layui-btn-normal" />
? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? </div>
? ? ? ? </form>
? ? </body>
? ? <script type="text/javascript">
? ? ? ? $(function(){
? ? ? ? ? ? ? ? $("form").validate({
? ? ? ? ? ? ? ? ? ? rules: {
? ? ? ? ? ? ? ? ? ? ? ? userName: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? required: true, //該項(xiàng)表示該字段為必填項(xiàng)
? ? ? ? ? ? ? ? ? ? ? ? ? ? maxlength: 5 //表示該字段的最大長度為5
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? passWord: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? required: true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? number: true? //表示該字段必須為數(shù)字
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? messages: {
? ? ? ? ? ? ? ? ? ? ? ? userName: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? required: "*必填",
? ? ? ? ? ? ? ? ? ? ? ? ? ? maxlength: "*最多5個字符"
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? passWord: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? required: "*必填",
? ? ? ? ? ? ? ? ? ? ? ? ? ? number: "*必須是合法的數(shù)字"
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? })? ? ? ??
? ? ? ? ? ? });
? ? </script>
</html>
總結(jié)
以上是生活随笔為你收集整理的使用validate.js实现表单数据验证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue的token刷新处理
- 下一篇： asus官方android升级包,华硕A