JS用户表单

最终效果图：



一个JS动态表单可以主要由几部分组成：1.一个表单（表格嵌入）
2.页面加载事件 3.响应事件的方法

①制作出上图的静态页面，通过css来定义区域的颜色等属性

②以“用户名”为例，打开页面定位到用户名文本框，空值移开鼠标则提示红色提示字，点击文本区域则定位光标同时提示消失。所以需要获取一个失去焦点与获取焦点





利用共用输出方法来完成提示错误与隐藏错误提示，然后通过输入的名字来传给verifyUName来完成验证用户名是否符合标准，这里利用了正则表达式来完成，这样会比较方便，因为正则表达式的定义即简单明确又节省代码。

而刚刚我们还提到了，一打开网页则定位的要求，所以要调用在body中的onload时间来完成



其他文本框也都是类似的事件，只是方法略有不同

③接下来是验证码，要随机获取并且可以与输入的对比，所以也需要事件与方法来完成，并且要调用Math.random方法来产生随机数



验证码中要注意了，我就是忽视了提取生成验证码的方法麻烦了半天，因为验证码是随机生成的了，所以我们就要拿到这个值，而生成方法中不会返回这个值给方法，但是他会把值给“div_code”，所以我们要得到div中的值就好了，所以用到了document.getElementById("div_vcode").innerHTML，这样就确保了，这个数是随机生成的，而不会是再次生成的，因为我之前将这个地方置为了生成方法，所以就一直给我一个新的随机数，导致我不能完成验证，每次都是错误。



④这样，基本都已经完成了，所以该到提交部分了，虽然要提交整个表单直接一个submit就可以了，但是我们还要确保所有信息的完整性，所以要再统一的验证一下整个表单 ，并通过alert来提示


最终展示：

正确无误：



错误提示：