js判断输入框内容格式

Posted 2022-12-14 zy_dream

今天测试大姐让改bug，好几处都是对输入框的内容有要求。

class SignUpForm(FlaskForm):
    name = StringField(u'姓名', validators=[DataRequired(), Length(2, 12)])
    mobile = TelField(u'手机号', validators=[
        DataRequired(u'必填'),
        Length(min=11, max=11, message=u'手机号码长度必须为11位')
    ])
    password = PasswordField(u'密码', validators=[DataRequired(), Length(6, 32)])
    repeat_password = PasswordField(u'重复密码',
                                    validators=[
                                        DataRequired(),
                                        EqualTo('password', u'密码必须一致')
                                    ])
    token = StringField(u'验证码', validators=[
        DataRequired(u'必填'),
        Length(min=6, max=6, message=u'验证码错误')
    ])
    submit = SubmitField(u'注册')

    def __init__(self, app, *args, **kwargs):
        super(SignUpForm, self).__init__(*args, **kwargs)
        self.app = app

    def validate_mobile(self, field):
        if UserModel.query.filter_by(app_id=self.app.id,
                                     mobile=field.data).first():
            raise ValidationError(u'该手机号已存在')

    def validate_token(self, field):
        if not verify_token(session, field.data):
            raise ValidationError(u'验证码错误')

flask-wtf 这里是对表单内容进行了判断，实现的是在点击 submit 之后进行判断。但是测试之后大姐要求的是一输入完就进行判断。我只能想到用 js 的焦点来解决。如果谁能告诉我你直接输入了内容，然后秒判断，有这种方法的，请务必告诉我。

经过网上的搜索和尝试，最终完成了失去焦点判断的功能：

	$(function () 
            $('#name').focus(function () 
                $('#worry1').text('');
            );
            $('#name').blur(function () 
                var l = $(this).val();
                var L = l.length
                if (L > 5)
                    $('#name').after('<font id="worry1" color="red">注册名字过长</font>');
            );
        )
        $(function () 
            $('#repeat_password').focus(function () 
                $('#worry2').text('');
            );
            $('#repeat_password').blur(function () 
                var str = $(this).val();
                var p1 = $('#password').val();
                if (str != p1)
                    $('#repeat_password').after('<font id="worry2" color="red">重复密码错误</font>');
            );
        )
        $(function () 
            $('#password').focus(function () 
                $('#worry4').text('');
            );
            $('#password').blur(function () 
                var l = $(this).val();
                var len = l.length;
                if (len < 6 || len > 32)
                    $('#password').after('<font id="worry4" color="red">密码长度必须大于等于6，小于等于32</font>');
            );
        )
        $(function () 
            $('#mobile').focus(function () 
                $('#worry3').text('');
            );
            $('#mobile').blur(function () 
                var reg = /^1[34578]\\d9$/;
                var r = $('#mobile').val();
                var res = r.match(reg)
                if (res == null)
                    $('#mobile').after('<font id="worry3" color="red">手机格式错误</font>');
            );
        )