js 如何限制input提交？

作者站长头像
站长
· 阅读数 19

如何用js限制 姓名和手机号不能为空大神帮忙改改 主要用于h5公众号页面

<form method="post" id="register-form"  action="auth.php" class="nice-validator n-default">
            <div class="form-group">
              <input type="text" class="form-control" id="name" name="name" placeholder="姓名" autocomplete="off" required="required" />
            </div>
            <div class="form-group">
              <input type="password" class="form-control" id="phone" name="phone" placeholder="手机号" autocomplete="off" required="required" />
            <input type="hidden" value="职工"/>
            </div>
            <div id="validator-tips" class="validator-tips"></div>
            <!-- <div class="checkbox">
              <label>
                <input type="radio" name="ag">
                供应商 </label>
                <label>
                  <input type="radio" name="ag">
                  123</label>
               </div> -->
            <div class="form-center-button">
              <button type="submit" id="submit_button" class="btn btn-primary btn-current">注册</button>
            </div>
          </form>
回复
1个回答
avatar
test
2024-07-10
document.getElementById('register-form').onsubmit = function(e) {
  var name = document.getElementById('name').value.trim()
  var phone = document.getElementById('phone').value.trim()
  if(!name || !phone) {
    e.preventDefault()
    alert(name?'手机号不能为空':'姓名不能为空')
  }
}

你也可以在html上指定pattern，就是校验样式上可能会不太好看

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容