发表于： 2019-06-04 21:21:22
2 760
今天完成的事情：
今天配置好了nginx，完成了表单验证
明天计划的事情：
学习angulaJS,看一下基本操作
遇到的问题：
表单验证看了好久
收获：
nginx，service的设置，表单验证
server {
listen 88;
server_name local.jnshu.ptteng.com;
location / {
root D:/web/rw/jstask5;
index index.html index.htm;
}
location /carrots-admin-ajax/{
proxy_pass http://dev.admin.carrots.ptteng.com/;
}
}表单验证的学习
表单（form）作为 HTML 最重要的一个组成部分，几乎在每个网页上都有体现，例如用户提交信息、用户反馈信息和用户查询信息等，因此它是网站管理者与浏览者之间沟通的桥梁。在表单中，表单验证的作用也是非常重要的，它能使表单更加灵活、美观和丰富。
<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jQueryStudy</title> <style> .int{ height: 30px; text-align: left; width: 600px; } label{ width: 200px; margin-left: 20px; } .high{ color: red; } .msg{ font-size: 13px; } .onError{ color: red; } .onSuccess{ color: green; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head><body> <form method="post" action="#"> <div class="int"> <label for="name">姓名：</label> <input type="text" id="name" class="required" /> </div> <div class="int"> <label for="email">邮箱：</label> <input type="text" id="email" class="required" /> </div> <div class="int"> <label for="address">住址：</label> <input type="text" id="address" /> </div> <div class="int"> <input type="submit" value="提交" id="send" style="margin-left: 70px;" /> <input type="reset" value="重置" id="res" /> </div> </form> </body></html>
显示效果如图 1 所示：
图 1 表单初始化
在表单内 class 属性为 “required” 的文本框是必须填写的，因此需要将它与其他的非必须填写的表单元素加以区别，即在文本框后面追加一个红色的星号标识。可以使用 append() 方法来完成，代码如下：
//为表单的必填文本框添加提示信息（选择form中的所有后代input元素） $("form :input.required").each(function () { //通过jquery api：$("HTML字符串") 创建jquery对象 var $required = $("<strong class='high'>*</strong>"); //添加到this对象的父级对象下 $(this).parent().append($required); });
显示效果如图 2 所示：
图 2 在必填元素后添加小红星标记
用户在“姓名”文本框中填写完信息后，将光标的焦点从“姓名”文本框中移出时，需要即时判断姓名是否符合验证规则。当光标的焦点从“邮箱”文本框移出时，也需要即时判断“邮箱”填写是否正确，因此需要给表单元素添加失去焦点事件，即 blur 事件。 jQuery 代码如下：
//为表单的元素添加失去焦点事件 $("form :input").blur(function () { // ...省略代码 });
给表单里的必填元素添加验证功能的步骤如下：
（1）判断当前失去焦点的元素是“姓名”还是“邮箱”，然后分别处理。
（2）如果是“姓名”，判断元素的值的长度是否小于 6 ，如果小于 6 ，则用红色字体提醒用户输入不正确，反之，则用绿色提醒用户输入正确。
（3）如果是“邮箱”，判断元素的值是否符合邮箱的格式，如果不符合，则用红色字体提醒用户输入不正确，反之，则用绿色字体提醒用户输入正确。
（4）将提醒信息追加到当前元素的父元素下面。
【注】：为了使用方便，当 text 文本框中的内容格式错误时，程序应尽量把所有提示信息都显示出来，而不是每次验证一种格式后只显示一个提示信息。 不过有时为了提高响应性，也会每次只显示一个提示信息。如：检查用户名是否重复，需要访问数据库。
如何提示，需要依据具体的业务需求来确定。
返回列表
评论