JS输入验证提示

在需要验证的input标签上添加失去焦点事件，如下

<input type="password" id="LoginWord1" onblur="myFunction()" />

用正则表达式验证输入的字符，若不匹配则清空，并提示

function myFunction() {
            var LoginWord1 = $("#LoginWord1").val();
                var str = /^[A-Za-z0-9]{5,12}$/;
                if (!str.test(LoginWord1)) {
                    $("#LoginWord1").val("");
                    $("#LoginWord1").attr("placeholder", "请输入5~12位的字母或数字");
                }
        }

还有一种提示效果，需要引用插件layer

<script src="~/Content/layer/layer.js"></script>
function myFunction() {
            var LoginWord1 = $("#LoginWord1").val();
                var str = /^[A-Za-z0-9]{5,12}$/;
                if (!str.test(LoginWord1)) {
                    $("#LoginWord1").val("");
                    //$("#LoginWord1").attr("placeholder", "请输入5~12位的字母或数字");
                    layer.tips('请输入5~12位的字母或数字', '#LoginWord1', {
                                tips: [3, '#0FA6D8'], time: 3000
                            });
                }
        }

layer.tips的运用具体可参考layer官方文档
效果图：