在javaScript / Jquery中创建自定义验证类

时间:2017-09-07 07:15:03

标签: javascript jquery html

假设有一个输入元素字段,我想创建一个新的验证类 myClass ,我可以插入任何可能执行某些功能的html元素还设置了

等属性
<td>
   <input type="text" id="endDate" name ="endDate" class="select_200" required readonly="true">
</td>

HTML

"let say character count less then 10"

现在,分别设置元素需要一个类来执行:

  

功能检查 Bitmap selectedImage = getResizedBitmap(yourBitmaptoCompress, 350, 350); 和设置   属性。

     

设置readonly,required等属性

这样我就可以将该类添加到具有相似属性的所有元素。

  

验证+通过仅添加类来设置/重置属性

3 个答案:

答案 0 :(得分:1)

您可以为输入元素设置自己的自定义属性,并使用这些自定义属性查询输入字段并执行各种操作。你可以在下面找到我的样本。

$(function () {
	//Set various input field attributes here
	$("input[data-myCustomClass]").each(function(){
		//$(this).attr("readonly", true);
		$(this).attr("required", true);
	});

	//Sets max length - you can change this code to retrieve info from attribute
	$("input[data-setFieldLength]").each(function(){
		$(this).attr("maxlength", 10);
	});

	//Validate for field length based on "validateFor" attribute
	$("input[data-validateFieldLength]").each(function(){
		$(this).on('focusout', function(){
			 var validateFor = $(this).attr("validateFor");
			 if ($.trim($(this).val()).length < parseInt(validateFor))
			 {
				 $(this).focus();
				 $(this).select();
			 }   
		});
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" data-myCustomClass data-setFieldLength id="field1" /> 
<input type="text" data-myCustomClasss id="field2" />
<input type="text" data-setFieldLength id="field3" />  <!-- set field length to 10 -->
<input type="text" data-validateFieldLength id="field4" validateFor="5" /> <!-- validate for 5 characters and return focus -->

答案 1 :(得分:0)

您是否已为字段创建新功能?

答案 2 :(得分:0)

      on 
       <form onsubmit="return validate()" name="form">  
       <td>
       <input type="text" id="custname" name ="endDate" class="select_200" 
       required readonly="true">
       <font style="color:red" id="custnameerror"></font>
      </td>
      <button onclick="return validate()"></button>
      </form>

     javascript validation function like
   <script type="text/javascript">


    function validate(from)
     {
    var error=document.getElementById("custnameerror");
    var custname=form["custname"].value;

      error.innerHTML="";

      if( custname==null || custname==""){
          error.innerHTML="Enter customer name";
          return false;
      }

      if(custname.length<3){
          error.innerHTML="Customer name should be minimum 3 character";
          return false;
      } 
      if(custname.length>80){
          error.innerHTML="Customer name should be in between 3 to 80 
      character";
          return false;
      }/*end */

  </script>