JS验证

最新推荐文章于 2024-04-20 14:59:10 发布

草莓蛋糕冰激凌

最新推荐文章于 2024-04-20 14:59:10 发布

阅读量144

点赞数

分类专栏： JS Bootstrap SpringBoot Thymeleaf 文章标签： js

本文链接：https://blog.csdn.net/weixin_38138222/article/details/79485513

版权

SpringBoot 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

Bootstrap

2 篇文章 0 订阅

订阅专栏

验证input类型的邮箱地址格式:

//验证邮箱地址
        $("#sys_system_adminEmail").on("input propertychange",function(){       
            var patrn = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            var result = true;
            var adminEmail=$("#sys_system_adminEmail").val();
            if (!patrn.exec(adminEmail)) {
                $("[name='adminEmailtext']").html("请输入正确的邮箱地址");
                $("[name='adminEmailtext']").css('color','red');
                     result = false;
            }else{
                $("[name='adminEmailtext']").html("");
                $("[name='adminEmailtext']").css('color','#999');
            }
        });

//验证input类型的ip地址

 $("#allowIPs").on("input propertychange",function(){   
            var patrn = /^(?:(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:1[0-9][0-9]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:2[0-5][0-5])|(?:25[0-5])|(?:1[0-9][0-9])|(?:[1-9][0-9])|(?:[0-9]))$/;
            var result = true;
            var ip=$("#allowIPs").val();
            if (!patrn.exec(ip)) {
                $("[name='iptext']").html("请输入正确的ip");
                $("[name='iptext']").css('color','red');
                     result = false;
            }else{
                $("[name='iptext']").html("");
                $("[name='iptext']").css('color','#999');
            }
        });

根据radio不同选项，设置文字内容（思路是根据上面验证邮箱和ip的文字提示得到的）

   方法一：这个是根据隐藏的input进入页面的时候，根据radio值显示文字

 if($('#isDecrypt').val()!=null){
            if($('#isDecrypt').val()=="1"){
                $("#isDecrypt1").attr("checked","checked");
                $("[name='isDecrypttext']").html("邮件将进行敏感词汇过滤");
                $("[name='isDecrypttext']").css('color','#999');
            }else if($('#isDecrypt').val()=="2"){
                $("#isDecrypt2").attr("checked","checked");
                $("[name='isDecrypttext']").html("邮件将不进行敏感词汇过滤，直接发送");
                $("[name='isDecrypttext']").css('color','#999');
            }
        }

方法二：手动选择radio时，改变的提示

 $('input[type=radio][name=sys_system_isDecrypt]').change(function() {
            if (this.value == '1') {
                $("[name='isDecrypttext']").html("邮件将进行敏感词汇过滤");
                $("[name='isDecrypttext']").css('color','#999');
            }
            else if (this.value == '2') {
                $("[name='isDecrypttext']").html("邮件将不进行敏感词汇过滤，直接发送");
                $("[name='isDecrypttext']").css('color','#999');
            }
        });

页面：

<div class="col-sm-9">
    <div class="radio" style="padding: 0px;">
		<label>
			<input name="sys_system_isDecrypt" id="isDecrypt1" type="radio" class="ace"  value="1" />
			<span class="lbl"> 启用</span>
			<small name ="isDecrypttext" style="font-size: 12px;color: #999;margin-left: 10px;"></small>
		</label>
    </div>
    <div class="radio" style="padding: 0px;">
		<label>
			<input name="sys_system_isDecrypt"  id="isDecrypt2" type="radio" class="ace" value="2" />
			<span class="lbl"> 关闭</span>
		</label>
    </div>
</div>

效果：