跟随前一篇文章，我们了解了AngularJS是什么以及它的历史。今天，源代码时代的H5老师来讲讲AngularJS的形式验证和用法。
说到表单验证，每个人都必须首先想到正则表达式并在JQ进行验证。是的，大多数时候，我们不需要一个接一个地编写正则表达式来匹配我们的验证算法，但是我们更经常地使用我们的validate。但有时，出于性能考虑，我们不得不放弃使用JQ(如手机)。这个时候应该怎么做表单验证？我们真的要一个个写原生正则表达式吗？答案是否定的，我们还有很多选择，比如我们万能的AngularJS。好了，言归正传。首先准备表格如下。
& ltfont face = " Microsoft ya hei " size = " 3 " >;& lt！DOCTYPE html>。
& lthtml>。
& lthead>。
& ltmeta charset="UTF-8 " >;
& lttitle>。角形检查
& lt/head>。
& ltbody>。
& ltform name = " my form " method = " post " action = " # " & gt。
& lt表格>;
& ltp>。为你注册一个特别账户
& lttr>。
& lttd>。用户名
& lttd>。
& ltinput type = " text " name = " username " placeholder = "请输入用户名(4~20位)"/>。
& lt/td>。
& lt/tr>。
& lttr>。
& lttd>。手机号码
& lttd>。
& ltinput name = " phone " type = " number " placeholder = "请输入您的手机号码"/>。
& lt/td>。
& lt/tr>。
& lttr>。
& lttd>。邮箱
& lttd>。
& lt输入type = " email " name = " email " placeholder = "请输入一个常用邮箱号码"/>。
& lt/td>。
& lt/tr>。
& lttr>。
& lttd>。密码
& lttd>。
& ltinput id = " pwd " type = " password " name = " pwd " placeholder = " set a password "/& gt。
& lt/td>。
& lt/tr>。
& lttr>。
& lttd>。确认密码
& lttd>。
& ltinput type = " password " name = " pwd 2 " placeholder = "注意密码同上"/>。
& lt/td>。
& lt/tr>。
& lttr>。
& lttd>。
& lt/td>。
& lttd>。
& lt输入type = " submit " value = " submit "/>；
(注:*为必填项)
& lt/td>。
& lt/tr>。
& lt/table>。
& lt/form>。
& lt/body>。
& lt/html>。& lt/font>。
此时点击注册，页面会刷新提交，即没有验证。以下是渲染。
第三，邮件验证
邮箱验证类似于用户名验证，只需要使用myForm.email.$error.email语句来确定输入的是否是合法的邮箱名，如下图所示:
第四，密码验证
密码验证比较简单，只需要确定输入的最小位数，但是这里有一点需要特别注意，因为输入的密码需要重新输入确认，所以需要绑定二次输入框和密码确认框，所以需要为密码输入框设置唯一的id号(这里的ID是pwd)。
动词 （verb的缩写）确认密码
如上所述，我们需要将这个输入框与前面的输入框绑定，以匹配输入内容的异同。这里需要Compare-pwd="pwd "，其中属性中的pwd是上面密码框中的id值。此外，它与上述密码输入框的比较使用了user.password！= pwd2，如图所示:
至此，我们的验证已经完成。
效果图如下:
是不是觉得不用自己写很长一段路的正则表达式，也不用在周围写复杂的验证和判断的逻辑关系？AngularJS的表单验证就是这么简单。要不要自己试试？
附上源代码如下:
& ltfont face = " Microsoft ya hei " size = " 3 " >;& lt！DOCTYPE html>。
& lthtml>。
& lthead>。
& ltmeta charset="UTF-8 " >;
& lttitle>。角形检查
& lt/head>。
& ltbody>。
& ltform name = " my form " method = " post " action = " # " & gt。
& lt表格>;
& ltp>。为你注册一个特别账户
& lttr>。
& lttd>。用户名
& lttd>。
& ltinput type = " text " name = " username " placeholder = "请输入用户名(4~20位)"/>。
& lt/td>。
& lt/tr>。
& lttr>。
& lttd>。手机号码
& lttd>。
& ltinput name = " phone " type = " number " placeholder = "请输入您的手机号码"/>。
& lt/td>。
& lt/tr>。
& lttr>。
& lttd>。邮箱
& lttd>。
& lt输入type = " email " name = " email " placeholder = "请输入一个常用邮箱号码"/>。
& lt/td>。
& lt/tr>。
& lttr>。
& lttd>。密码
& lttd>。
& ltinput id = " pwd " type = " password " name = " pwd " placeholder = " set a password "/& gt。
& lt/td>。
& lt/tr>。
& lttr>。
& lttd>。确认密码
& lttd>。
& ltinput type = " password " name = " pwd 2 " placeholder = "注意密码同上"/>。
& lt/td>。
& lt/tr>。
& lttr>。
& lttd>。
& lt/td>。
& lttd>。
& lt输入type = " submit " value = " submit "/>；
(注:*为必填项)
& lt/td>。
& lt/tr>。
& lt/table>。
& lt/form>。
& lt/body>。
& lt/html>。& lt/font>。
感谢源代码时代的H5讲师提供这篇文章！
本文原创，请注明出处(http://www.itsource.cn)！
1.《表单验证 AngularJS表单验证》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《表单验证 AngularJS表单验证》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/junshi/795483.html
