Flask+JQuery Validation 插件+Ajax進行表單的驗證

在Flask web開發實踐中，經常會涉及到表單的提交和驗證，flask的插件flask-wtf提供了不少表單驗證的方法，可是目前所知這些表單驗證都須要提交後再驗證，不能作到當用戶輸入完用戶名就能檢查用戶名格式是否正確

最近學習了點Jquery和Ajax，此次寫JQuery Validation插件+Ajax的實時表單驗證的過程當中遇到了不少小問題，在網上搜索也沒有找到這方面的項目整合經驗，因此將本身最後寫好的代碼作一個筆記，但願能夠幫到其餘人。

先貼結果圖：

從圖片能夠看出，在表單驗證時，除了進行簡單的長度，郵箱格式等驗證外，還經過Ajax與服務端進行信息交互，檢查用戶輸入的郵箱是否已經註冊以及用戶名密碼是否與服務端數據庫匹配。

下面開始貼代碼：
1.用戶類User,使用Flask-SQLALCHEMY方便數據庫操做

class User(UserMixin,db.Model):
__tablename__ = 'user'
id = db.Column(db.Integer,primary_key=True)
email = db.Column(db.String(128),unique=True,index=True)
password_hash = db.Column(db.String(128))

def __init__(self,email,username,password,telephone):
    self.email = email
    self.password_hash = generate_password_hash(password)

@property
def password(self):
    raise AttributeError('password is not a readable attribute')

def verify_password(self,password):
    return check_password_hash(self.password_hash,password)

@password.setter
def password(self,password):
    self.password_hash = generate_password_hash(password)

def __repr__(self):
    return '<User %r>' % self.username

2.登陸頁面：login.html
2.1 引入JQuery和Jquery Vlidation,bootstrap

<link rel="stylesheet" href="{{ url_for('static',filename='bootstrap/css/bootstrap.css') }}">
<script src="{{ url_for('static',filename='js/jquery-3.2.1.js') }}"></script>
<script src="{{ url_for('static',filename='js/jquery.validate.js') }}"></script>

2.2 表單的設計

<form class="form-horizontal" role="form" id="loginForm" method="post" action="{{url_for('user.login')}}">
            <div class="form-group">
                <label for="email"  class="col-sm-3 control-label">郵箱：</label>
                <div class="col-sm-7">
                    <input type="text" name="email" id="email" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="password"  class="col-sm-3 control-label">密碼：</label>
                <div class="col-sm-7">
                    <input type="password" name="password" id="password" class="form-control">
                    <p class="help-block" id="helpmessage"></p>
                </div>
            </div>
            <div class="form-group">
                <span class="col-sm-3">
                </span>
                <span class="col-sm-7">
                    <input type="submit" class="btn btn-success btn-block" value="登 錄">
                </span>
            </div>
        </form>

2.3 Jquery Validation+Ajax驗證表單的字段

<script>
$(document).ready(function(){
    var validator;
    validator = $("#loginForm").validate({
        rules:{
            email:{     //爲name="email"的控件添加驗證
                required:true,      //必填
                email:true,     //郵箱規範
                minlength:6,    //最小長度爲6
                maxlength:20,   //最大長度爲20
                remote:{        //將用戶輸入信息返回服務端，當用戶返回true時表示驗證經過，當用戶返回false時輸出messages中對應錯誤信息
                    url:"/user/loginvalidate/email",       // 接收遠程驗證的地址
                    type:"post",
                    data:{
                        email:function(){return $("#email").val();}
                    }
                }
            },
            password:{
                required:true,
                minlength:6,
                maxlength:15,
                validateUser:true       //自定義驗證方法用於驗證密碼是否正確
            }
        },
        messages:{          //自定義提示信息
            email:{
                required:"郵箱必填",
                minlength:"最小長度爲6",
                maxlength:"最大長度爲20",
                email:"郵箱格式不正確",
                remote:"郵箱未註冊"
            },
            password:{
                required:"密碼必填",
                minlength:"密碼最小長度爲6",
                maxlength:"密碼最大長度爲15"
            }
        },
        errorPlacement: function(error, element) {      //錯誤信息的位置
            error.appendTo( element.parent() );
        }
    });
    $.validator.addMethod(  //添加自定義驗證函數
    "validateUser",       //自定義驗證函數的名稱
        function(value,element,params){
            $.ajax({        //發送Ajax請求
                type:"POST",
                url:"/user/validate/password",
                dataType:"json",    //數據類型爲json,發回的數據已自動解析
                data:{
                    email:function(){return $("#email").val();},
                    password:function(){return $("#password").val();}
                },
                success:function(data){
                    if(!data){      //根據返回的信息在指定位置提示用戶
                        $("#helpmessage").html("用戶名或密碼錯誤");
                    }else
                        $("#helpmessage").html("");
                }
            });
            return true;
        },
        "用戶名或密碼錯誤"
    );
});
</script>

3.view.py代碼
3.1 登陸頁面處理

@user.route('/login', methods=['POST','GET'])
def login():
if request.method == "GET":   #當請求方法爲get時，返回html頁面
    return render_template("user/login.html")
else:                         #當請求方法爲post時，處理表單提交的信息
    email = request.form.get("email")   #獲取表單的字段
    password = request.form.get("password")
    user = User.query.filter_by(email=email).first()        #查找數據庫中是否存在，若是不存在user爲None
    if user.verify_password(password):  #查找密碼是否對應
        login_user(user)                #用戶會話管理flask-login插件中記錄用戶的登陸狀態
        return redirect(request.args.get('next') or url_for('main.home'))
    flash("用戶名或密碼錯誤！")
    return redirect(url_for('.login'))

3.2 檢查用戶輸入郵箱是否已註冊的代碼

#登陸檢查郵箱是否已註冊
@user.route('/loginvalidate/email',methods=['POST','GET'])
def validateemail2():
email = request.form.get('email')    #獲取用戶輸入的郵箱
if User.query.filter_by(email=email).first():   #當查詢結果不爲空，說明郵箱已註冊能夠登陸
    return jsonify(True)      #返回json數據true      
return jsonify(False)          #當返回false時，jquery validation中的messages中對應的信息將會顯示在輸入框後面

3.3 檢查用戶名密碼與數據庫中是否對應的代碼

#檢查用戶名密碼是否正確
@user.route('/validate/password',methods=['POST','GET'])
def validatepassword():
email = request.form.get("email")       #獲取用戶輸入的信息
password = request.form.get("password")
user = User.query.filter_by(email=email).first()
if user is not None and user.verify_password(password):     #若與數據庫中用戶名密碼匹配，返回true
    return jsonify(True)    #返回json數據true，接收方會自動解析，當返回true時不顯示信息
return jsonify(False)       #當返回false時顯示「用戶名或密碼錯誤

代碼就是這樣啦，寫代碼過程當中遇到最多的就是Ajax請求數據的封裝和解析，根本上仍是對json不瞭解你們有什麼建議歡迎提，西西