ajax验证手机号码已存在_注册

检查手机号是否存在时，后端返回"0"代表已存在，返回"1"代表可以注册。

注册时，后端返回"0"代表注册失败，返回"1"代表注册成功。

 

实体类

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    uphone = db.Column(db.String(11))

html/demo.html

<p>
    <input type="text" id="uphone" onblur="showPhone()">
    <span id="uphone-show"></span>
</p>
<p>
    <input type="button" value="注册" onclick="btnReg()">
</p>

javascript/demo.html

<script src="/static/js/common.js"></script>
<script src="/static/js/jquery-1.11.3.js"></script>
<script>
    /**
     * 向后端发送请求判断电话是否存在并得到结果
     * */
    function checkPhone() {
        var result = null;
        xhr = createXhr();
        xhr.open('get', '/check?uphone='+$("#uphone").val(), false);
        xhr.onreadystatechange = function () {
            if(xhr.readyState==4 && xhr.status==200){
                if(xhr.responseText == "0"){
                    result = false;
                }else{
                    result = true;
                }
            }
        };
        xhr.send(null);
        return result;
    }

    /**
     * 输入完成后，调用checkPhone()得到结果，并给出对应的提示到网页上
     * */
    function showPhone(){
        if(checkPhone()){
            $("#uphone-show").html("可以注册");
        }else{
            $("#uphone-show").html("电话号码已经存在");
        }
    }

    /**
     * 点击注册后，调用checkPhone()得到结果，并给出对应的提示到网页上
     * */
    function btnReg() {
        if(checkPhone()){
            var xhr = createXhr();
            xhr.open('post', '/register', true);
            xhr.onreadystatechange = function () {
                if(xhr.readyState==4 && xhr.status==200){
                    if(xhr.responseText == "1"){
                        alert("注册成功");
                    }else{
                        alert("注册失败");
                    }
                }
            };
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send("uphone="+$("#uphone").val());
        }else{
            alert("请检查填写的信息是否正确!");
        }
    }
</script>

javascript/common.js

function createXhr(){
	if (window.XMLHttpRequest)
	{
		return new XMLHttpRequest();
	}else{
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
}

视图

@main.route('/')
def index():
    return render_template('demo.html')


@main.route('/check')
def check():
    uphone = request.args['uphone']
    user = User.query.filter_by(uphone=uphone).first()
    if user:
        return "0"
    else:
        return "1"


@main.route('/register', methods=["POST"])
def register():
    user = User()
    user.uphone = request.form['uphone']

    try:
        db.session.add(user)
        db.session.commit()
        return "1"
    except Exception as e:
        print(e)
        return "0"