发表于： 2019-03-09 19:56:34
1 565
今天完成的事情
小课堂
明天计划
转职业
遇到的问题
无
收获
【JS-TASK6】 有哪些常见的验证表单方式（即时输入验证，失去焦点验证等），他们各自的优缺点是什么？
分享人：霍亚豪
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
JavaScript 可在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。以减轻后台数据传送压力，提高数据传送的质量和效率。
2.知识剖析
什么是表单验证？表单验证的作用
访问任何一个带注册表单的网站，你都会发现，当你提交没有输入任何信息的表单时，注册页面都会给你提交一个反馈，它告诉你提交了错误的数据，这些信息可能看起来像下面这样的：
“该字段是必填的”（该字段不能留空）
“请输入你的电话号码，它的格式是：xxx-xxxx”（它要求你输入的数据格式为三个数字接一个横杠，然后再接着是四个数字）
“请输入一个合法的邮箱地址”（如果你输入的数据不具有“somebody@example.com“的邮箱格式）
“你的密码长度应该是8至30位的，并且至少应该包含一个大写字母、一个符号以及一个数字”
3.常见问题
表单验证有那几种方式？
4 解决方案
输入时进行实时验证(.keydown)
退出焦点时验证(.onblur)
提交表单时进行本地验证
5.编码实战
原生jsNG-SHOW
NG-MESSAGE
6.扩展思考7.参考文献
https://www.oschina.net/translate/angularjs-form-validation
8 更多讨论
1.ng-message则呢用？
首先要引入messages的cdn文件，
<script src="https://cdn.bootcss.com/angular-messages/1.3.16/angular-messages.js"></script>
在其次在需要验证的地方按格式来写：ng-message="required"
2.如何验证手机号码？
<script type="text/javascript">
function validatemobile(mobile)
{
if(mobile.length==0)
{
alert('手机号码不能为空！');
return false;
}
if(mobile.length!=11)
{
alert('请输入有效的手机号码，需是11位！');
return false;
}
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(!myreg.test(mobile))
{
alert('请输入有效的手机号码！');
return false;
}
}
</script>
3.如何验证只能是英文字母？
<script type="text/javascript">
//验证只能是字母
function checkZm(zm){
var zmReg=/^[a-zA-Z]*$/;
if(zm!=""&&!zmReg.test(zm)){
alert("只能是英文字母！");
return false;
}
}
鸣谢
感谢大家观看
BY : 霍亚豪
返回列表
评论