[JS]判断表单数据是否符合格式

[JS]判断表单数据是否符合格式

表单对应HTML标签分别为 username password repassword email

1. 创建register.js 文件,其代码如下

$(function)(){
//用户名判断
	function verify_username(){
		//定义变量并获取用户的输入username
		let username = $('#username').val();
		//利用正则判断格式
		if (/^[a-zA-Z]\w{5,17}$/.test(username)){
			$('#u_msg').html('用户名格式正确').css('color','green');
			return true
	}else {
		    $('#u_msg').html('用户名格式不正确').css('color','red');
		    return false
		}
	}
	$('#username').change(function(){
		if (verify_username()){
		//ajax 异步请求
			$.get('app/verify_username/',{username:$('#username').val()},function(data){
				if (data.status == 1){
					$('#u_msg').html('用户已存在').css('color','red')
				}
			})
		}
	});
	//密码判断
	function verify_passwd(){
		if (/^\w{8,}$/.test($('#password').val())){
			$('#p_msg').html('密码格式正确').css('color','green');
			return true
		}else {
			$('#p_msg').html('密码格式不正确').css('color','red');
			return false
		}
	}
	$('#password').change(function () {
        verify_passwd()
    });
    //确认密码判断
    function verify_repasswd(){
    	if ($('#password').val() == $('#repassword').val()){
    		$('#re_msg').html('密码输入一致').css('color','green');
    		return true
    	}else {
    		$('#re_msg').html('密码输入不一致').css('color','red');
    		return false
    	}
    }
    $('#repassword').change(function () {
        verify_repasswd()
    });
    //邮箱判断
    function verify_email(){
    	if (/^\w+@\w+(\.\w+)+$/.test($('#email').val())){
    		$('#e_msg').html('邮箱格式正确').css('color':'green');
    		return true
    	}else {
    		$('#e_msg').html('邮箱格式不正确').css('color':'red');
    		return false
    	}
    }
    $('#email').change(function () {
        verify_email()
    });
    //提交按钮的判断
    $('#register').click(function(){
	    if (verify_username() && verify_passwd() && verify_repasswd() && verify_email()){
	    	return true
	    }else{
	    	if ( ! verify_username()){
	    		console.log('用户名不正确')
	    	}
	    	if ( ! verify_passwd()){
	    		console.log('密码不正确')
	    	}
	    	if ( ! verify_repasswd()){
	    		console.log('确认密码不正确')
	    	}
	    	if ( ! verify_email()){
	    		console.log('邮箱格式不正确')
	    	}
	    }
    });
});

2. ajax请求注意:

1. 在视图函数view中需要传入数据data;
2. 不能用render渲染HTML页面,需要用JsonResponse 渲染

3. views中的函数

def verify_username(request):
	data = {
		'status' : 1,
		'msg' : 'user registed'
	}
	
	if request.method == 'GET':#前面ajax请求用的是get方法
		username = request.GET.get('username')
		users = User.objects.filter(username= username)
#前端数据与数据库查询对比,若用户存在,则用户已经注册
		if not users.exists():
			data['status'] = 0,
			data['msg'] = 'no this user'
	else:
        data['status'] = -1
        data['msg'] = 'request error'

    return JsonResponse(data)

没有在IDE上敲,直接敲写的,没有代码提示,如果有错误,请各位大佬指正