笔记：表单验证以及sweetalert中swal的使用

1.表单验证jsp页面表单样例

<div class="input-group input-group-lg"><span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-user"></span></span><input type="text" class="form-control" id="userName" name="userName"placeholder="请输入名字" aria-describedby="sizing-addon1" required>
</div>
<span id="user"></span>

input中required设置必填字段；
用到字体图标glyphicon glyphicon-user;
bootstrap的表单组件input-group

2.表单用户名验证javascript代码

//用户名校验$("#userName").focus(function () {//聚焦，输入值$("#user").html("用户名必须大于等于两个长度");$("#user").css({color: "green"});});$("#userName").blur(function () {//失去焦点，值改变var username = $(this).val();if (username.length < 2) {//判断输入值是否符合条件$("#user").html("");$("#user").html("用户名不合法");$("#user").css({color: "red"});flag = false;} else {$("#user").html("");$("#user").html("用户名合法");$("#user").css({color: "green"});num = num + 1;flag = true;}});

3.邮箱验证正则表达式；

//邮箱正则表达式
var reg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/;
var email = $(this).val();
if (!reg.test(email)) { //正则验证不通过，格式不对flag = false;$("#emaila").html("");$("#emaila").html("邮箱格式不正确");$("#emaila").css({color: "red"});
} else {$("#emaila").html("");$("#emaila").html("邮箱格式正确");$("#emaila").css({color: "green"});num = num + 1;flag = true;
}

4.sweetalert中swal的使用

1.首先导入js，css

<link rel="stylesheet" href="css/sweetalert/sweetalert.css">
<script src="js/jquery-2.2.4.js"></script>
<script src="css/sweetalert/sweetalert.min.js"></script>

2.绑定点击事件

$(".buy").click(function () {/*swal组件*/})

3.swal格式

swal({title: "Are you sure?",text: "请确认是否开通会员!",type: "warning",showCancelButton: true,confirmButtonColor: "#DD6B55",confirmButtonText: "Yes, 去支付!",cancelButtonText: "No, 不开通!",closeOnConfirm: false,closeOnCancel: false
}, function (isConfirm) {if (isConfirm) {swal("确认", "你点击了确认按钮 :)", "error");} else {swal("取消", "你点击了取消按钮！ :)", "error");}
});

完全格式的swal有确认取消按钮以及回调函数；
简单版的swal只有一个提示功能；

笔记：表单验证以及sweetalert中swal的使用相关推荐

jquery插件-表单验证插件-提示信息中文化与定制提示信息
接上一篇 2)messages 提示:修改默认的提示信息最简单的方法是引入message_zh.js文件即可! 如果需要在validate()方法内提示则可以使用本选项类型:Object 说明:自定 ...
input的表单验证(不断更新中~~)
1 手机号验证 <input type="tel" id="phone" name="phone" placeholder=" ...
angularjs学习第四天笔记（第一篇：简单的表单验证）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
javascript 表单验证大全（一）
javascript 表单验证大全(一) 5.身份证验证:包括15位和18位.function idNumber(s)//身份证验证 {regu1=/^[1-9]\d{7}((0\d)|(1[0-2] ...
ext form验证tip_FormValidator表单验证
表单校验测试验证表单之文本输入框用户名: 性别: 男女出生年月: 身份证号邮箱学历 --请选择-- 专科本科研究生硕士博士国家区号 -地区区号 -电话号码 -分机号码兴趣爱好乒 ...
jquery validate表单验证插件
1 表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
elementUI表单验证之动态表单验证
elementUI 中 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可. (1)常用表单验证 ...
jQuery Validate表单验证框架详解
jQuery表单验证框架总结 jQuery Validate验证框架详解 jQuery校验官网地址:bassistance.de » jQuery plugin: Validation 一.导入js库 ...

笔记：表单验证以及sweetalert中swal的使用

1.表单验证jsp页面表单样例

2.表单用户名验证javascript代码

3.邮箱验证正则表达式；

4.sweetalert中swal的使用

笔记：表单验证以及sweetalert中swal的使用相关推荐

最新文章

热门文章