JavaScript表单默认值与验证实现

文本框的默认值设置和提交验证，其实是前端表单开发绕不开的一环。不管你是搞企业后台、用户注册，还是评论输入框，都会遇到这些。

用 HTML 里的value属性设置默认值是最基本的用法，简单直接。比如，写一次就能起到引导用户的作用。如果是用 JS 操作 DOM，document.getElementById('name').value也挺好使。React 用户就别忘了用defaultValue。

提交验证就更重要了。靠浏览器自带的验证属性，比如required、pattern，能省不少事。再加点 JavaScript，比如写个validateEmail()函数，检查邮箱格式，也比较灵活。下面这种就挺常见：

function validateEmail(email) {
  var re = /\S+@\S+\.\S+/;
  return re.test(email);
}

还有像jQuery Validation或Formik这样的库，验证起来更省心。哦对了，别只信前端，后端验证也必须有，防止有人绕过页面直接发求。

实际项目里，通常是几种方式一起上。默认值让表单更友好，前端验证反馈更快，后端验证保安全。组合一下，体验和可靠性都不差。

如果你想研究更细一点的做法，下面这些文章也蛮有用的：

• 文本框设置默认值验证以及提交
• javascript 遍历验证所有文本框的值
• JavaScript 文本框验证脚本
• 文本框验证
• html javascript jquery 文本框水印

你要是经常搞表单页面，这套用法建议直接收进小本本，挺实用的。