表单验证 JS - 验证名字输入字段答案

【问题标题】：form validation JS - validate first name input field表单验证 JS - 验证名字输入字段
【发布时间】：2023-03-14 19:27:01
【问题描述】：

谁能告诉我如何验证这个输入字段？在检查验证之前，提交按钮处于禁用状态。非常感谢提前，非常感谢任何帮助我入门。这是我的代码：

 <style>
     .textinput {

        border: 1px solid #000;
        border-radius: 0;
        box-sizing: border-box;
        color: #6c6c6c;
        height: auto;
        margin: 0px auto 15px auto;
        padding: 4px 0 5px 10px;
        width: 100%;
        font-family: Apercuregular,sans-serif;
        font-weight: normal;
        letter-spacing: .02em;
        font-size: 16px;
        display: block;
         width: 300px;
 }

 .form-button{
  background-color: #000;
  color: #fff;
  display: block;
  letter-spacing: .02em;
  font-family: Apercuregular,sans-serif;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  padding: 1.2em 2em 1.2em 2em;
  width: 275px;
  margin: 25px auto 25px auto;
  border: 1px solid #000;
  outline: none;
  }
 .form-button[disabled],
 .form-button[disabled]:hover {
    background-color: #d1d3d4;
    color: #fff;
    border: 0 none;
 }

 .form-button:focus,
 .form-button:hover{
  background:#f3f3f3;
  color:#000;
  border: 1px solid #f3f3f3;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
 }

 .fieldLabel {
  display: block;
  font-size: 13px;
  font-family: Apercuregular,sans-serif;
  letter-spacing: .02em;
  text-align: left;
  width: 100%;
  line-height: 17px;
 }

 input[type="checkbox"]{
 display: none;
 }


 input[type="email"]  {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 }

 </style>

           <div id="container_COLUMN1">
                <input type="text" name="First Name" id="control_COLUMN1" label="First Name" class="textinput mandatory" placeholder="First name*" required labeltext="First name*" maxlength="50" mandatory="true">
            </div>




            <div>
              <button type="submit" class="defaultText form-button" id="submitBtn" value="Enter Now">Enter Now</button>
            </div>

【问题讨论】：

除非您询问此插件，否则请不要使用 jQuery Validate 标签。已编辑。

标签： javascript jquery forms client-side-validation

【解决方案1】：

这取决于您要查找的验证类型。由于它是一个名称字段，我假设您要确保它不是空白且仅包含字母。

要使用 jQuery 实现这一点，您可以使用以下内容：

var reg = /^[a-z]+$/i;
var name = $('#control_COLUMN1').val();

if(name != '' && reg.test(name)) {
  //name is valid
} else {
  //name is invalid
}

【讨论】：

【解决方案2】：

类似的东西。不知道是不是最好的方法

// get the text 
var inputText =document.getElementById("control_COLUMN1").value;

// do controls

if(controls){
    document.getElementById("submitBtn").hidden=false;
}else{
    document.getElementById("submitBtn").hidden=true;
}

【讨论】：

【解决方案3】：

您可以在字段中查找更改/键，然后获取值以验证它不是 0，然后添加/删除按钮的禁用属性。

$("#control_COLUMN1").keyup(function(event) {
 var fieldValue = event.target.value;
 if (fieldValue == 0) {
  $("#submitBtn").attr("disabled", "disabled");
 } else {
  $("#submitBtn").removeAttr("disabled", "disabled");
 }    
});

Codepin

【讨论】：